0:00 OK. Let's get started. As always, the first thing we need to do is set display to grid. Then let's work on the column side of things. We want three equally sized columns -- grid-template-columns. Note, of course, the width is no longer hard-coded as 500 pixels or 1,000 pixels. We don't know how wide it's going to be, meaning we can't use pixels.

0:23 I can't say 200px 200px 200px. I guess they're equally sized, but they're not going to take up the full width of the container. That's not what I want. What I want instead is three columns that are exactly the same size that fill that container. One option would be to do 33-and-a-third percent three different times. That will work. It's just a pain. As you can see, it works just fine.

0:50 The much better solution is to use fractional units -- 1fr 1fr 1fr -- meaning divide the space horizontally into three fractions and create columns one fraction each. Then we have our rows -- grid-template-rows. The first row is twice as tall as the second row as the instructions say. Again, we could use percentages -- 66.6666 percent. Then the second row would be 33.333 percent.

1:19 That adds up to 100. That will work. This one is twice as tall. It's messy having to deal with percentages. The much better solution is to use fractions once again. Divided into three fractions, two of them go to the first row. One of them goes to the second row. That's it. As you can see, we maintain the three equally sized columns no matter how wide the page is or the container is. The same thing goes for our rows. OK.