0:00 So far, we've seen rows in isolation and columns in isolation. Let's combine them to make a slightly more complicated layout. Why don't we go for a four column and two row layout? Four-by-two, meaning we'll have eight spots for content.

0:17 What I'm going to do to start is comment out all of my boxes, because I want to make it clear that the grid doesn't care if there's stuff in it or not. When we set up the rows and the columns, we're defining a structure that content can then flow into and fill the spaces.

0:34 If we're going to make a four column layout, right now, we're working with 1000px for the width of the container and for the height. We haven't yet discussed fractions and percentages and other units.

0:45 I'm just going to work with pixels. If I want four columns, each one needs to be 250px. That's what I'm going to, grid-template-columns: 250px 250px 250px and 250px. A little bit annoying to have to type that, but there is a solution that we'll see soon.

1:04 That defines my four columns and then I want two rows and I'll have them be equally sized of 500px each, grid-template-rows: 500px 500px. We won't see anything, but if I do use the DevTools. I turn the grid overlay on, you can see my spots in here, what we call the grid tracks. There's four going across in a column and there's two rows going from top to bottom.

1:32 Now, if I add my content in, let's just start with, let's do six. They'll flow from left to right, top to bottom to fill those grid tracks in. Of course, I probably want eight. Let's go and do eight. There we are.

1:51 If for some reason, I only define eight grid tracks, but I have 10 elements. What happens here is that there's no space for my other content. They just overflow the bounds of this container.

2:02 Let's do one more example. How about a three-by-three layout? The math is going to be slightly annoying. It's going to be a little bit off. If I'm doing 1000px divided by three. I'll just keep it simple at 333px for each column. Three columns of that size. There you are.

2:21 We have three columns going across and then three rows of that same size. We have a three-by-three grid. Technically, there's an extra pixel. It's probably impossible to see in the screencast, but there's an extra pixel because this all adds up to 999px out of 1000. That's fine. Soon, we'll work with fractions and percentages anyway.

2:43 That's using rows and columns together. We define the underlying rows and columns, the tracks in the grid, and then our content. If there is content, we'll fill into those spots that we define.