Grid Rows & Columns

[00:00:00]
>> Kevin Powell: Finally get into the good stuff now of creating some layouts and we're going to be starting by using CSS Grid and then we'll move into flexbox. When we're in the normal flow, which is inline and block elements, block elements stack on each other, inline elements flow, I'm playing around with that a little bit. When we get to grid, it's when we actually start getting things that don't go next to one another anymore.

[00:00:19]
So that's how we know we need either one of them. We're going to explore a little bit about how we pick between them as well as we're going through this. But before we even dive into grid, I do want to say really quickly that grid can feel very complex. I get a lot of people who tell me they don't use grid because there's too much happening with it. There can be a lot. There are a lot of new things with grid that are unique to grid.

[00:00:44]
But you only need maybe 20% of it to do 80 to 90% of what you're going to use it for. The other 80% that does the 20% extra is really cool. You can do some really powerful things with it, but you don't use it very much. So we're going to be covering the 20%, and I'd encourage you to use it as much as you can, get used to that, and then you slowly like, oh what if I could do this, and then you find out, oh, okay, there's a new property or a new value or a new thing I could use that would enable me to do that, because there probably is, but most of what you can be doing is with the basic 20%.

[00:01:20]
So we're going to start with this really basic example. I have a div with a class of grid and grid. So we do a display grid, we're changing into a grid layout mode. It's the most underwhelming declaration you'll ever do. Nothing happens. Something has happened, something very important has happened, but it doesn't actually change the way anything looks on the screen, so it feels a little bit disappointing at first, especially if you compare it to flex where stuff just starts moving around.

[00:01:51]
Really important, and I'm going to talk more about the implications of this in a minute, but when we do a display of grid on the outside, the elements still a block level element. It's the inside that's changed. So it's still stacking the same way the other steps before it, other steps after it, it is block on the outside. Grid is what we call an inner display value. So we've changed what's happening in the middle, and these have actually turned into grid items over here, and there's a few important things with that, but we're going to start with the one property, there's two properties that you really need to know, well three because it's display grid.

[00:02:28]
Then there's the grid-template-columns. Got to spell columns, which there we go. And when you do a grid-template-columns, you just write out what you want for your columns, all using different length units. Any length unit is valid. Let's just come in with the easy ones, 200 pixels, 200 pixels as a simple example. I've created two columns, and we can see the content has turned into this 2x2 grid right there.

[00:02:55]
So, first one down, we can know how to create columns. A lot more we can do with this, but we've created two columns, so it's a good start. The other one that you're going to use a lot is gap. So say 16 pixels. Put space between them. Gap is the cool version of margins because we don't have to worry about space being added outside of the elements. It only adds space between the siblings. So between one and two, it will put that space, between these ones, it puts the space here we're getting it, but we're not getting any space added to the outside.

[00:03:31]
We can even add, let's just put a border on here. 10 pixels solid. And it will be black because the text color is black. So we can see we're not adding any extra space, we don't have to worry about removing margins. Don't put margins on grid or flex items. Just let them be and use gap to create your spacing. It's going to make your life a lot easier. Now, I can make more columns. Let's say we do 100 pixels over here, we get a third column and it's just going to squeeze on over there and we get a third column.

[00:04:00]
It's smaller because I said it's 100 pixels in size. One problem with grid is, let's do 200 and 200. Now I have four columns, but you'll notice they're overflowing at the side. Shoots on out because the grid is listening to what I'm telling it to do. This would be like saying width 1000 pixels, the element will become 1000 pixels. So we do have to be really careful when you're declaring columns that you don't inadvertently create some overflow by having sizes that force the browser to overflow, the same way you don't want to set a width on something.

[00:04:37]
So, there we go, we get four columns though, which is kind of cool. The way it works, let's go back down to two. Is, actually, before I look at how it works, we're going to open up the other thing. Anytime using grid, I'd strongly recommend opening your dev tools. Finding your element, the parent. And in the dev tools, you're going to get this little grid icon that shows up. This is also in Firefox, also in Safari.

[00:05:02]
You click on it and it shows you your grid, along with the gaps, so you can sort of visualize and see things that are happening a little bit more. So if I don't have anything in here, actually we didn't have anything, we'd run into, let's do one item. We have one item, we'll still see some stuff. And we're in CodePen, so it's going to make me turn that on again. I do apologize. It's saying there's nothing in the body, fantastic.

[00:05:32]
Copy, refresh. So if I open up my grid inspector now that we only have one item on there, you'll see there's still an empty cell that's living there because I said there's two columns. So it's still going to create two columns, it just has nothing to put in there. This is also really important, it won't cause any noticeable, actually it might, no, it doesn't even cause any noticeable overflow because there's no element within that cell that it's created.

[00:05:55]
But we're creating those cells, and if there is an element that can occupy the cell, it will. Which is why before we saw when I had four items here. It's just going, okay, item one, then there's an empty cell, it's going to go into item two. I only said there's two columns, so it's not going to continue making columns. It goes, okay, I filled up the two columns. I'm going to make a new row, and I'm going to drag, or not drag down, but you can see right there when I inspect that, makes a new row following the same rules.

[00:06:24]
In a way, grid is a lot like the normal flow. We add content, the content just flows down the page. With grid, it's going to do the exact same thing except if there's cells to fill the cells that you've told it to on the columns, if there's no more columns, it just creates a new row and just keeps on going in the exact same way. So very similar to the default with the exception is it first does the columns, then goes down and automatically creates rows for us.

[00:06:48]
There are ways to create rows. You probably don't want to, the same reason you don't want to create heights. There are situations where it will come up, guaranteed, but most of the time you're just going to create columns. Now, one of the problems of what I've done is I've done the 100 pixels here, and as I mentioned, let's not do 100 pixels, but let's say these are 500 pixels. And we overflow. We have that problem where I've declared sizes that aren't going to fit on the page, and that's not good.

[00:07:18]
So we need to find a way that we can replace these types of declarations with something that will allow it to live like we had before, where it will occupy the space that it can occupy, and that's it, and that's where there is a new unit. So we have gap so far is new, grid-template-columns is new, and we're going to come in with one more new thing here, the fr unit. FR is unique to grid. You can't use it anywhere else.

[00:07:44]
It's the fractional unit, it's related to like flexible stuff, but essentially what it's going to do, you can see it's made two columns, and those two columns grow and shrink and they just fit the space available. It makes it behave the way an element would work if it was a block element where it will fill up the space, if there's not enough space, it shrinks. If we had more content in any of these, let's just come in here in CodePen or in any editor, you can write lorem and hit tab and it will give you a bunch of filler text.

[00:08:17]
So you can see it's working just sort of like a normal element would, but it's living within the column now, and the column is 1fr, which just means distribute the space between each, make each column the same, essentially, as long as you're using fr or one I should say, every one of these columns is like one fraction of the available space. The available space when you're using it on columns will always be take the entire space.

[00:08:40]
Divide it by, well, divide it by how many columns you're creating that are using frs and then distribute it equally, so you'll always end up with equal columns. You can definitely come in and change this. I can do a 3fr and it's going to change the layout. I don't do this very often. There's use cases potentially. And it's just a ratio of how much it's distributing that space by. This gets three for every one that those ones are getting.

[00:09:06]
So as the space is getting bigger, this is going to grow at three times the rate that those ones are going, which is why it's bigger at all the sizes until we get too small, but it's distributing the space a little bit differently. It makes it hard to predict exactly how big things are going to get. So I tend just to go in with 1fr for equal columns every time, and that's what you'll probably use most of the time.

[00:09:32]
Important note here that with this column having more text in it, you'll notice the height of the other elements has also gotten bigger. This is something that's a little bit different from a block element. Well, block elements can't go next to one another either, but the height of a grid item is my one, my two, my three are now grid items. They live by the rules of being a grid item, and part of that rule is by default, they want to be as tall as their siblings, essentially.

[00:10:04]
Because when we're making that column, let's look at it again with our inspector. When those columns are created and the rows are created. Each row has to be the height of the tallest sibling, just how a row of content will have to work, because if not you're going to cut a sibling in half, it doesn't really make sense. So by default, the row is always the height of the tallest sibling. And all of the other siblings will match the height of that one.

[00:10:32]
It's not impacting the item four, because item four is in a new row of content, so that one just keeps on doing what it's doing. We haven't set a height there, so that row will behave and match the height of the tallest one that is living inside of that row. If ever you are repeating the same thing over and over again, like I'm doing here, we can make it a little bit easier by using a repeat syntax.

[00:11:02]
So we can say 2 1fr. So it's a repeat function. You have parentheses. The first number is how many times are you repeating. The second number is what is the number that is being repeated. So if I want two columns, 2 1fr. If I want 3, 3 1fr, I want 4, 4 1fr, it's always going to be an equal number of columns. Sorry, an equal size for each one of your columns. You can do weird things in here where you can actually supply multiple values for your repeat.

[00:11:27]
I'm not even going to look at it because how often are you going to do that, not very often. If you want to play with that, you definitely can, it gets a little bit weird, but maybe for certain layouts it's the type of thing that you need, but generally speaking, this is one of the most common things you'll be using grid for. Yeah. Now, let's go back up to four and let's reduce the content in item two.

[00:12:01]
Just so this makes a little bit more sense. And I often get the question of if we're making equal columns, let's say I wanted four equal columns, could I use percentages instead of using the fr unit? And the answer is sort of, but it will cause problems. So if I want four columns, it would make sense to say 25%, 25 times four is 100, but you'll notice they're actually overflowing of the parent. My item four is sticking out the side here.

[00:12:28]
The idea here makes sense. Each one should be 25% of the parent. The problem is there is a gap in between each one of them. It doesn't take that gap into account. If there was no gap, this would actually work fine. No problem, because there's nothing extra being added. It's a little bit like the problem with margins, if you're adding margins to something with a width, that's making it bigger than what it was.

[00:12:51]
So it's 25% each, plus the three gaps causes the last one to overflow. So very, very rarely do I use a percentage in grid. It can come up where you need one column that's 50% and then you do something else with the other column, but most of the time, if I'm using grid, I'm going to be using the fr unit. And especially if you just want equal columns, just use fr, don't bother using percentage because it'll just get you into trouble.

[00:13:16]
There's one very important thing of what it means to be a grid item, and this is where I talked about layout modes and the rules change. And one of those things is what happens when something is changed into a grid item. So we do a display of grid. We can see here, I have a grid, but I haven't used it yet. The first one here is an inline item. This is a block, and this is inline block, we haven't talked about it.

[00:13:37]
Used to be really common that we need it. These days with flex, you use it a bit less often. It's sort of a mix between inline and block, but you'll notice here like the spacing isn't even the same. We talked about with inline elements, the padding's visual, it's not taking up any room. We can't have margins on them, even though I am, I don't think I'm telling it to have margins or I am, I'm telling them they should all have margins on them.

[00:14:02]
The margin isn't working on this, so the spacing's different. If I do a display grid here. They all live by the same rules now. They're exactly the same. They're not really an inline element anymore or a block element or an inline block or anything like that. They are now grid items. So that means they live by the rules of being a grid item. Those rules are they will stretch that way by default and the height will match their siblings.

[00:14:34]
So if we add in grid-template-columns to create those columns as before. 1fr 1fr 1fr, and one of these has a bit more content in it. Then they're all going to stretch to fit that. There's ways we can manipulate that, but default behavior, fill up the cell as much as possible in both directions. So any of the rules you had before for like, I've seen people being like, I need this to be an inline element, it's not going to work.

[00:14:56]
It's a grid item now, it lives by the rules of being a grid item. It's that new environment that it's in, and most of the rules make a lot of sense. So, again, it's one of those things of the layout mode being like, oh, why are these changes happening? It actually makes it a lot easier to use the different elements within those contexts than what they would be if it behaved the same way as it did before.