Positioning Grid Items using areas

Daryl Duckmanton
A free video tutorial from Daryl Duckmanton
Full Stack Software Developer
4.6 instructor rating • 2 courses • 42,002 students

Lecture description

In this video, we learn how to position grid items using the concept of areas. Areas are used to simplify the positioning of items over different device sizes.

Learn more from the full course

Mastering CSS Grid 2020 - With 3 cool projects

The future of layouts. It's like Flexbox, but dialled up to eleven

17:13:59 of on-demand video • Updated October 2019

  • How to implement responsive layouts using CSS Grid
  • How to build regular layouts in CSS Grid
  • All properties that are part of the CSS Grid Specification
  • How to build commonly used sites such as YouTube using CSS Grid
English [Auto] Hello Roman in this video we're going to look at positioning grid items using areas. So let's get to it okay. So now we're getting to the really cool part of the course. This is the part you've all been waiting for. And that is how can we use this as grid for the purpose of Responsive Web Design. Now for this video I'm just going to be focusing on the simplicity of moving items around when the width of the screen changes. But by the time we're done in the next few videos you'll be able to handle most responsive web design problems fairly easily now up until this point we've been moving items around using grid lines either by number or by name but to be honest with you I rarely ever do this. And as you will see in a second you'll understand why. So let's get started. So in this example I have at the moment I have a one column grid by as many rows as they need to fill in all the items. And that's because I'm just using the default say this grid. I'm not specifying any rows or columns for this grid at all. It's really straightforward. I'm just saying the display type to be great dancers aged UML looks very similar to what we've seen. The only difference is I've added Our days for each item in the grid and that so I can target them in my success here. Now how responsive web design works insists as grid is it works on the concept of grid areas. OK. So what we normally do is we add a new property called GRID template areas and then we use it in a certain way. So how it works is for each row that we have in our grid or that we want in our grid you'll add a string like this. Right. And then you add one like this. You just keep adding them for each row that you want. OK. So we want in our case we want six of them. Right. And then we end with a semicolon. Now obviously an empty string doesn't really do anything right. So what do we type in here. Well we just type at the moment because we have one column a single name that represents an area. So say I want area A to be in the first row. We just type I write. If I type be the next one I have an area in the second row called B then say the D E and F on C and do it like this for now. OK. Now these are just names of areas they're not necessarily matching up to any items of any case. So what we need to do is define a grid area of that nine. So for the autumn I I wanted to appear in grid area. So he's top that right now at the moment. If I save this nothing breaks yet nothing moves either. OK. And it doesn't move because area I is at the very top of the grid. However if I was to say make the top one F and then the bottom one I like that you're now going to see that item eye is appearing at the bottom right. Because that's where area exists exists in the very last row of our grid so whether the nails at the rest on this be grid area see grid area the area A and finally grid area F right. So these all these names match one of the letters or the area name that we give inside of this property here. So if I run this we can say that everything is pretty much in the order we specified. So item F is at the top because we've got f area at the top. Item number B is in the second row because would not be the C C D D E A and then I I. Right now I've just specified a single letter for the grid area. This could be anything we want. So it can be on. Food right. That come down to where grid area is for F and go through and save well it still works. OK. So I'm just using letters at the moment just so I can represent each item area and turn it back to what it was and I made a mistake. What did I do. I did not change this back to F got Co. Now I'm just going to swap some things around here's an input what I did so. Let's go. What can we follow after day we've got f after that I then C then B then E OK. And this just indicates that we can order. OK. So D they are at the top because the areas at the top if the second I see b hopefully you get the picture by this time. Now this is a single column template. So we have a single value inside of the double quotes. However what if we want to have two columns. What does this look like. Well I'm going to come there and do that. So it might be a query for a mean width of seven six eight. I'm going to go grid. Template columns unless it is to a repeat of two by one fraction. OK. When I run this at the moment everything appears in the first column. And that's because up here that's what grid template areas had. It has only one value. OK. So the first value is everything goes in the left column. If we want to spread things over two columns we need to redefine this property and how it works is. So I want to have three rows. Well we have to do is go grid template areas and now just have three individual lines like that. OK. Now inside this one I'm going to put a first. That the audience matches area. I will come first in the top left then B will be directly next to it then on the next rung the say sees in the left then D in the right and then is in the left in the last row and F is in the right on the last right. So when I do this finger item I is in the left column first row B in the first column right row then C then D and E F go. And that was really easy to achieve all we needed to do which is change the area template and the number of columns. And we didn't have to do anything else that we didn't have to say you know item I moved to line 1 2 4 or whatever it is all you have to do is to say okay that's the area associated to it. I'll just change the definition of the area and therefore we'll move to that location really really easy stuff now to complete this I'll just show the example of three columns. So we've got a grid template columns and this time will get repaid of three by one F R and then we'll have grid template areas and hopefully you've guessed it we want just two rows this time and assign a b c d e f and Saif and at the moment you're not seeing that but that's because we're not wide enough so we'll make our screen water. And now you see three columns two rows where everything is in the order we asked for it. Now if I go I'm going to make CB on the last F on the first row you'll see they swap. Very simple right. This is incredibly easy and incredibly powerful in terms of what it can do. All right. Probably the biggest annoyed annoyance of it is that you have to serve the areas for each item at the start. But once you've done that shuffling around things based on media queries is really really cool so that's all I want to cover in this video. So see you all in the next one.