0:00 I'm working with these rainbow boxes that don't really have much content inside of them because they're simple and somewhat visually interesting. It's also pretty far removed from the real world where you probably won't have a grid of rainbow boxes on your website. You might have a grid of cards, photos, paragraphs, and text.

0:19 I just want to show that whatever content you have in the grid doesn't really matter as far as the grid is concerned. Instead of these rainbow boxes, why don't we just do paragraphs of text? The first thing I'll do is maybe simplify our grid. Let's go to a 2-by-2 layout. That would be 500 pixels, 500 pixels.

0:38 Remember, these numbers are stemming from the width of 1,000 pixels, the height of 1,000 pixels. It's a square. If I want two rows and two columns at the same size that take up the full width and height, it would be 500 each. Grid-template-columns, two 500-pixels, rows, two 500 pixels. If I look at this, using the DevTools, you can see I have 2-by-2 grid tracks.

1:02 Instead of putting my colored boxes in there, I'll make some paragraphs. I'll just make a paragraph or two. Let's do four paragraphs of Lorem Ipsum text. It doesn't matter what's in there. You can see that they are following these grid tracks, but there's a lot of extra space and that's just because my paragraphs aren't very big.

1:23 If I make the paragraphs bigger, if I give them maybe a bigger font size, I'll give each paragraph a font size of 2.5 ems. Here we are. You can see that they are abiding by the grid tracks that we set up. Each one of them fills in a slot. It doesn't have a background color necessarily. There's no border, but it still is filling in this 500-pixel by 500-pixel grid track, each one of them.

1:49 Still not the most practical example. It is something other than a colored block. We're still very early on in the process. I just don't want you to think grid only works with colored divs.