0:00 Next up, I want to talk about some of the units we can use to define our rows and columns. Pixels work, but they're a little clunky. Right now, I have a two-by-two grid. It's 1,000 pixels by 1,000 pixels. Each row is 500. Each column is 500. That works.

0:16 As soon as I change the size of this container...Maybe I make it percentage-based. I want it to be 90 percent the width of my page. Now my 500-by-500 columns don't look so great. The same would go for the height.

0:31 If I want them to scale and just take up 50 percent of the space of the parent container, I could use a percentage instead. I could say I want a column that's 50 percent and a second column that's 50 percent. Let's just duplicate this down here for the rows.

0:50 This should give us a two-by-two grid. Now, it doesn't matter how big the parent container is. If I give it a width of 400 pixels, very skinny, we still have two by two. 50 percent for this column, 50 percent for this column. 50 percent for this whole row, 50 percent for this whole row, in terms of height. That does work.

1:10 Then it gets a little tricky. If I wanted to do something like...Let's go back to having 1,000 pixels here, or even just 90 percent for width, 90 percent. I want to have six columns going across, so six in a row. I could do some math and try and use the right percentage. What is one-sixth of 100 percent? That would be -- what is it -- 16.666 percent or something like that.

1:42 Then I need to repeat this six times. One, two, three, four, five, six. That should give me six columns that are equally sized. The math is just annoying to have to do this. Not to mention the repetition, but that can be solved soon. The math is still tricky, where I'm having to compute some percentages and divide things out.

2:02 If I turn these guys back on, I'll have 10 boxes. Let's see what we end up with. It is a six-by-two grid. I just don't have 12 elements to fill it, but it is six by two. That does work, but, as I said, it gets obnoxious, especially if I don't want them to be all the same size.

2:19 Maybe I want this middle, these two columns, to actually be a single column twice as wide as the others. Then I have to do some more math. 16.6, 16.6. Then these two are going to be combined into a single column. What is 16.666 plus 16.666? I need a 33 1/3 percent-wide column. There we are. This one is now twice as wide as the other columns. It's always going to be twice as wide.

2:49 This works. As I said, percentages can be useful, but in the next video, I'll show you an even better grid-specific unit that we can use when defining our rows and columns.