The CSS Grid Area Property Lets You Position Items Like an Absolute Sniper

I am a big fan of CSS Grid. I’ve taught CSS Grid in many different videos on this channel.

You see me use CSS Grid on almost every project and every training that I produce, but there is in fact one property related to CSS Grid that I haven’t covered yet. I haven’t taught it. I don’t even think I’ve mentioned it in a video and it is the grid area property.

Let me show you what we’re going to be building today So this is a image kind of like divider gallery section, okay? The website that I pulled it from was using it to divide up content between the hero and the rest of the content on the Website kind of just to break things up add a little visual interest to the page things like that And I thought it would be a great case for our pop quiz series in the inner circle. So every week or every other week I post a pop quiz, a little series that we do for fun and to challenge people and to grow your skills very quickly in the inner circle.

Basically our goal is like I present a scenario, it might be a beginner scenario or intermediate or advanced, and the goal isn’t just to replicate it. The goal isn’t just to arrive at the visual conclusion that you’re shown. The goal is to figure out what is the most efficient, scalable, and maintainable way to achieve this.

Not just any way to achieve it, but like the best way to achieve it. It’s like taking a scientific approach to web design. So it really expands your mind.

It asks you to compare one methodology versus another methodology, and it really, really makes you a great thinker on top of being a great web designer. So this was the scenario presented. What I’m going to do in this video is I’m going to walk you through what I think is the best solution for this, the most scalable, the most maintainable solution, and that happens to be using Grid Area, which just is great because like I said, I haven’t covered grid area yet.

So let’s go ahead and get started. Now, you should know that, you know, we’re not chumps in the inner circle, okay? I give you a starter code pen and I actually ask everyone to write their solution with CSS, like write the actual CSS.

So yeah, even though we use page builders all the time, these pop quizzes are almost always done in CodePen because once again, I want you to expand your skill set. And by the way, what we’re about to do cannot be done in most page builders natively. So if you don’t know how to write the CSS, you’re kind of stuck.

So again, this is about empowerment. It’s about giving you true skills, not giving you fish, but teaching you how to fish, that kind of thing. So this is where we’re gonna start.

We’re gonna start with the blank code. Well, it’s not blank. I give you a bunch of images in a div.

The div has a class called Symmetrical Grid. Let me zoom in a little bit. And then the CSS is basically non-existent.

You’re starting from scratch. You’ve got to come to the solution. And by the way, not come to any solution.

Like I said, come to the best possible solution. So here’s what we’re going to do. We are going to go step by step.

I’m going to walk you through this. It’s going to take a little bit longer than it normally would if I was just doing this because I’m going to be talking through every single thing, teaching you how grid area works, going through thought process, yada, yada, yada. So the first thing that I want to do here is I want to flip back to the example.

And I kind of need to know, all right, we know it’s going to be CSS Grid. So column count, row count. What are we, how are we going to figure that out?

Column count, row count. Well, we’re just going to count the columns. One, two, three, four, maybe, maybe this is four, five, six, seven.

So I know at the minimum I need seven columns. But one thing I want you to observe is that this column right here looks to be wider than the other columns. And if that’s the case, we need to kind of know how much wider.

And here’s the thing. You know you have fractional units in CSS Grid. You can’t have like one and a half fractional units, right?

You can have two fractional units, which would make that column two times bigger than the other columns. You have three fractional units which is three times bigger than the other columns. So if it’s two times as big that’s easy that’s easy to handle that’s a layup right.

If it’s 1. 5 times which I think it is unfortunately I think it’s about 1. 5 times bigger than the other columns that’s a little bit trickier.

Now I’m going to give you the solution pretending that that is two times as big and then at the end We will correct it to 1. 5 times, but I don’t want to overload you right off the bat Let’s just go with the easy thing two times the other columns, so this is two columns Let’s recount them. Okay one two three four five six seven eight six, seven, eight.

Eight columns is what we need, okay? So let’s go ahead and put that in. So in our Symmetro grid, we’re gonna say, display this as a grid, all right?

We’re gonna say grid template columns, repeat. We’re gonna use a repeat function. If you don’t know what this is, or you don’t know what the min max thing is that I’m about to do, go back and watch my page building 101 course.

Watch the whole course, but there is a training on CSS Grid in Page Building 101 and it covers the repeat function, it covers MinMax, it covers all the basics, okay? This is going to be an 8 column grid, MinMax, 0, 1, FR. All right, now we’re going to do grid template rows next.

What is the value of the grid template rows going to be? So let’s go in and let’s count. So we know grid or grid row 1 is right here.

That’s where the images are touching the top of the grid. So that’s grid row one. We have two right here.

We have three right here. We have four right through the middle. We have five.

We have six. We have seven is the bottom of our grid. Now if you know anything about how rows and columns are numbered in CSS Grid, row seven is the end of a 6 column grid.

So the fact that I counted 7 means this is a 6 column grid. Row 7 is just the end of the 6th column. That’s the way that things are ordered in or numbered I should say.

So this is going to be a 6 column grid. We’re going to repeat 6 min max 0 1fr. So we defined eight columns, we defined six rows.

Now what you see here on the screen right now is absolute chaos. When we use grid area, what grid area allows you to do? Allows you to take an element and basically just place it anywhere in a grid that you want using coordinates.

What are the coordinates? Column starts, column ends, row starts, row ends, all on one line, one property, very efficient, very powerful. In order to do this, we need to be able to select each individual element and place it somewhere.

The way that we’re going to select it is with inf child. I also covered the inf family of selectors. These are pseudo classes in page building 101.

So go back and watch that if you don’t know what I’m talking about. So I’m going to select all direct children, not just one direct child. Right now I’m going to select all of them and I am going to do some low-hanging fruit.

Low-hanging fruit is like the rounded corners, okay, the border radius on these images. All right, so we’re going to say border radius and we’re going to go with something like 0. 5 rim, okay, and then you’re going to see these corners round up a bit right here.

All right The next thing I’m gonna do is I’m gonna steal that I’m gonna come down here And now I am actually going to select the first child So we’re gonna say image nth child one and this is selecting direct Children of the symmetrical grid and we could just check hey did I in fact select the first one border five pixel solid red border letting me know that I have properly selected the first child. Okay. So that’s pretty straightforward.

Now what I want to do with this grid, cause again, we are looking at absolute chaos right now. Okay. I want to get rid of all the images that I’m not working with.

I only want to work with one image at a time because that’s going to help my brain process everything that is going on. It’s going to make this much more like logical and just clutter free kind of situation here. So what I’m going to do is on this symmetrical grid image, this is selecting all of the images right here.

I’m going to do a little bit of a trick. I’m going to say display, and you know if I just hit display none, they’re all going to disappear, right? Well, watch this.

I can say display var, and I’m going to define a locally scoped variable for this display property. We’re going to call that variable display, but I’m going to put a comma. After the comma, I’m going to write the word flex, which basically means, hey, if there’s no display property defined, then display these items flex by default.

This is a fallback inside of our variable. This allows us to create a locally scoped variable with a fallback, which basically means I can go down here and I can say display none, all right? And that’s changing the display value of this property to none on the first image, which makes it disappear.

Now what I can do, remember I need to select all of them, right? So I’m gonna go two, three, four, five, six, seven, eight, nine, because there’s nine images in the grid. Now I’m going to just number them, two, three, four, five, and, oh, no, don’t, don’t, don’t delete things, six, seven, eight, and nine.

This gives me individual control over every single image in this grid, which is fantastic. And now what I can do is I can replace the display none of the first image with grid area. All right, so now I’m defining the grid area and guess what?

Image number one comes back and it’s ready for action. Here’s how grid area works. There’s four values, value one, value two, I’ll just say two, value three, and value four.

And you’re gonna see that my image just start jumping around there. It just starts trying to move around. Okay, let’s talk about what these values are.

The first value, and just for the record, guys, just for the record, I would not have done this. I would not have programmed it like this. They want this number right here to be the row start.

So the row the item starts on. Now, think about a box, right? Put it in a grid and then just drag its corner, right?

You could drag it down to cover more rows, drag it across to cover more columns. You could do whatever you want with grid area. You just define the row that it starts on, the column that it starts on.

See, this is column start. The row that it ends on and the column that it ends on. You can also use spans in here by the way, okay, if you don’t want to use actual numbers.

So what I would have done obviously is it starts on this column, it ends on this column, it starts on this row, it ends on this row. Why they divided it up, I don’t know. So they went row start and then row end is way over here.

And then column start is here and then column end is way over here. And if you feel like that’s jumbled up, and if that confuses your brain, I’m right there with you. I’m right there with you.

It doesn’t make any sense to me. It doesn’t make any sense, but it’s what we have to live with, okay? So now we go back to our example and we say, okay, let’s ask ourselves some questions.

Does this image, this is the image we’re working with right here, does it start on row one, which is way up here? No. Does it start on two?

No. Does it start on three? Seems like it.

Seems like it starts on three. OK. So we’re going to say you start on row three.

We’re also going to say, hey, column start. Where do you start on row two, row one? Well, I mean, look at it.

This one’s pretty obvious. It starts on row on column one. All right.

So we’re going to change that two to a one. So we’ve got the starts in there. Now, where does what row does this end on?

Well, we said it starts on three, goes through four, ends on five. Okay, so we’re going to come in, we’re going to change that three to a five. And then what about the span?

Where does this end? Well, I don’t want to define ends over and over and over again. I want to say these are all going to just span one column.

Okay, and now you see it puts our image right there in the center. Now, here’s the thing about grids, okay? And images in grids, really image placement in general.

But yeah, in a grid, the image is going to try to be its default dimensions, right? We actually want the image to be 100% the width of its grid cell and 100% the height of its grid cell. I want every image to behave like that.

So I’m going to go up to where I’m controlling all of my images, and I’m going to say with 100% height 100% and I’m going to hit save. And now you see, ooh, and see right now, because the grid is white and the page is white, we can’t even see where the grid is. We can’t see where the container, the symmetrical grid, where are the boundaries of this thing?

So just for now, I’m going to go up here and I’m going to say background color, 333. And that’s going to be like a charcoal color and oh, the grid is up there. The grid is not even taking up the full page, the grid is up there.

Now, we can better see our general structure. We’re going to remove this in a minute, but for now, it allows us to see the boundaries of our grid. The next thing that I need to do is image number 2.

Let’s just move on. I’m going to take my coordinates for image 1 and I’m going to paste them into image two, which is going to put image two right on top of image one. Okay.

Now the next thing I need to do is just, let’s move it over a column. So instead of column start one, let’s go column start two. And now I’m going to see that they are side by side.

Now look at how this is kind of stretching this first image right here. It’s also kind of warping the images. So I’m going to go where I’ve defined all of my images, styling like where I put my border radius and width and height and all that.

I’m going to say object fit cover, which is making sure that these images don’t stretch. Now, I need to give this second image because it’s not supposed to be the same dimensions. It doesn’t have the same row starts and column starts if you look at it.

It starts a row earlier and it ends a row later. So all I have to do is take the row start and make it start earlier, make the row end one later. And then I get different dimensions for that image.

Cause remember, it’s taking up a hundred percent height and second by a hundred percent width. Okay. Let’s do item number three.

So I’m just going to grab that and look, we’re just systematically building out our little grid here, move item three over another column. And then we’re going to look at how it’s positioned. Ooh, this one happens to be on row one, and then two, and then three, and then four.

It goes to row four, it looks like, okay? So we’re going to say, you start on row one, you end on row four. And that’s exactly what we’re gonna get.

I’m gonna steal its coordinates and paste them here. This one does stay on this column, okay? But it doesn’t start on one, it starts where this one ends.

This one ends on four, this one better start on four. And then for the end, I can actually say, hey, just go to the end. I can use a key word called end.

And now we’re seeing a little tiny issue in our grid. It’s touching the very top and the very bottom, and there’s no gaps between the items. So what I’m going to do is I’m going to come over to our grid in general, our symmetrical grid gap of one rim.

And that’s going to give us a gap between everything. I’m also going to say padding block of two rim, which is going to give us two rim of padding top and bottom in this grid. And so we’re still touching the edges of the screen, which is actually what we want, but we have this gap here, this gap here, which is padding.

And then we have the gap between all of our items, which is gap. Okay. All right.

So guys, we are coming along. Like look how easy this is. When you understand it can wrap your brain around grid area.

You can just take things and boop, boop. Like just, I don’t know what that sound effect was. Maybe we should edit that out.

I don’t know. It’s a little bit embarrassing, but you’re just putting things into a grid wherever you want them to go. So I’m gonna go ahead and paste oh and now we’re on our special one item 5 is the middle item you know what it needs to span 2 right and it needs to start one column over so on 4 there it is right there and doesn’t it need to start on row 1 it needs to start on row 1 and go all the way to the end of our grid spanning two columns.

Look at what we have. This is looking pretty good guys. All right I’m going to steal that, paste it here.

It started on column four but it, the previous one, took up two columns. So I think we need to start this one on six. We do need to start it on one.

It only needs to span one. That’s it. Okay.

And it needs to end on row which one? Hmm. Let’s see.

So we’re mimicking one, two, three, four. We’re mimicking the fourth item. So this one started on row four and went to basically row seven.

That’s three spaces. So I’m starting on row one. I need to go three spaces.

That would end on four. That’s correct. I think that’s right.

I think that’s right. We’re gonna have to look at this again in a second. And then it spans one.

That’s correct. I’m going to steal that. I’m going to come down here and we’re going to say that this starts on row four.

Good. And ends on end. And it stays on column six.

Okay. I think we have a little issue with our ratios there. With these starts and ends.

We’ll take a look at that as we can. You can adjust as much as you need to. It’s no problem whatsoever.

Let’s just keep going and getting the rest of our images in there. So the next one needs to start one more column over on seven. There it is, and it needs to mimic number two.

So start on row two, end on row six. So start on row two and end on row six, not 67, six. That gets us that.

And then basically I can just steal item number 1’s coordinates, and I can just say this is all good except for the column start needs to be on 7 or 8. Sorry, 8. Good.

Puts it right there. So guys, we’re basically more or less done. Let me go to here and see I think our ratios are not correct on these two columns right here if we look at our original this is much smaller than the top one right we’re kind of dividing that that column in half vertically and that’s not what we need to be doing so let me get I don’t know why it does this it brings that way over there all right so we’re gonna go one two three so item number four here’s item number four right here.

Starting on row four? No. Let’s start on row five.

That’s more like it. And then number three needs to end on row five. Perfect.

Now we’re talking. Now over here we need to do basically the exact same thing but opposite. So one, two, three, four, five, six needs to be the small one.

Okay. So that’s going probably to three. Yes.

And then this one starts on three and goes to the end. Yes. Now, refresh.

There we go. We have a nice symmetrical grid. Let’s get rid of our background color now.

We don’t need that anymore. Save. All right.

And then refresh. And you basically compare this to our example. Now it’s a bit too tall in my opinion, right?

Our example is much narrower. And so what that tells me is maybe we can put a maximum height on our symmetrical grid. We can say, hey, you can never get bigger than 20 rim.

It’s going to shrink that down. Because we’re using grid, everything just responds accordingly. Nothing ends up breaking.

This is what we end up with on our big screen size. Again, we don’t know what screen size this screenshot was taken on. This is again, it’s a responsive grid.

So the dimensions are going to get a little different based on the screen size. But what we’ve accomplished is effectively all the same. Where it shrinks down just fine, it expands just fine.

The only real problem that we’re running into is that in the example, this column is not two times the width of the other columns. It’s 1. 5 times.

And like I said, that creates a little bit of complication. Now, what I want you to see here, some people also think about using aspect ratios, perhaps. Like if I came down and said aspect ratio one to one, would that even do anything?

So let’s go to the. . .

No, not really. It doesn’t. 0:21:59

Okay. 0:21:59 So what we need to do is maybe let our grid get a little bit bigger let’s go to our max height of maybe 25 rim see how that does that’s a little bit better now we’re getting better ratios on our sides so we’re kind of dialing this in a little bit better now but i want to show you how to fix this center image that’s not supposed to be two times it’s supposed to be 1.

5 times like i said there’s no way to come over here, you remember how this one spans 2? You can’t span 1. 5, right?

We just broke our grid. It’s not a thing, okay? You have to use like whole numbers here, whole fractional units.

What we can do is find a number, a span, at which the span value is 1. 5 times the value of the other columns. 2’s and 3’s actually does that.

So let me get a calculator out. If all of our columns were actually two columns and we multiply that value by 1. 5 we would get three.

That’s a whole number right? So if we use three for our center and two for everything else our center would be 1. 5 times the other columns.

Okay so let’s do this. We need to figure out if this is two, and this is two, and this is two, and this is three, what column count are we actually going to arrive at? So we have, can I do this with drawing?

Yeah, there we go. Two, four, six, seven, eight, nine, 10, 11, 12, 13, 14, 15. What if we did a 15 column grid?

So instead of eight, we go to 15 right we keep the same number of rows look what that did Like nothing like blue out of out of whack it just everything got smaller everything’s tucked into one side of the grid Okay, so we have a 15 column grid now We want our center item to span 3 we want all the others to span 2 now Okay, this is going to make the center 1. 5 times All right, perfect Span to span to and now we’re getting there, but everything is overlapping Why well one reason is because their column starts are all out of whack You can’t start this one on two when this one was on one when that one’s spanning two, right? So this needs to be three this needs to be Two three four three.

Yeah, this goes to 5. This one also is on 5. This one is on 7.

This one goes from 7 across 3, that’s 8, 9, 10, so this needs to jump to 10 I believe. Yep. This one needs to be on 10.

This one needs to go 3 from there which is 16. And clearly that’s not right. What, oh we said we had a 15 column grid.

Okay, 10, 10, that was correct. Oh I’m sorry, 12. We’re not going by threes anymore.

12, I don’t know what I was doing. 14, there you go. And so now, save, refresh, we have exactly the same situation, just a little tiny adjustment.

And you can see why I think if I had started with like twos and threes and you would have like what is going on. So I wanted to show you with just normal one fractional units span one column, one column, one column, one column, but this one’s two columns, right? Now we go back and actually make this more of the exact replica of our example.

So that was grid area. You saw the coordinates. You saw how I don’t agree with how they ordered things, right?

I wish it was column start, column end, row start, row end. That seems very structured and logical to me. Just to recap, they do row start, column start, row end, column end.

It’s a little bit harder to read. It’s a little bit harder to remember. But if you practice, you’ll get the hang of it.

I’m going to put the code, let me go back to the camera here. I’m going to put the example code, and the starter pin down below in the description. I highly, highly, highly recommend you go do this from scratch.

Follow along with this tutorial, accomplish this layout, and learn about grid area ingrained it in your brain. Then if you want, join the inner circle, participate in these ongoing pop quiz examples that I put into the inner circle. There’s way more value in the inner circle beyond that.

I’ve covered I’ve covered it endlessly. I’m not going to go into all of it. I’ve covered it endlessly in previous videos.

But yeah, drop a comment down below. Let me know if you, this is your first time seeing grid area, if this helped you understand grid area better. I do want to say there are two different versions of grid area.

There’s a numbered grid area and a named grid area. I only covered the numbered grid area because that’s what we needed for this example, but there are other examples where you might want to use named grid area. I can do a video on named grid area at some point in the future.

But that’s it for today’s lesson. I hope you got a lot out of this. I hope that this channel is elevating your skills.

Remember it’s all free content. Pay with a like, pay with a that this channel is elevating your skills. Remember it’s all free content.

Pay with a like, pay with a comment. I’ll be back very soon with another training. Peace.