Check out a free preview of the full CSS In-Depth, v2 course:
The "Exercise Walkthrough" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle walks through her code she created during the exercise break.

Get Unlimited Access Now

Transcript from the "Exercise Walkthrough" Lesson

[00:00:02]
>> Estelle Weyl: So while we were taking a break I created this beautiful or hideous grid, depending on your opinion. So to do it, what I did was I displayed grid and then I used the grid template columns to define the width of my columns in order. So the first one is 10 pixels wide, the second one is twice that at 20 pixels.

[00:00:24] Then 40 pixels, then 80 pixels, then 160, then 320, then 640. That means that there are seven columns across. Had I added one more, or let's just reduce one, then it would go longer at the bottom. Or if I had added one more,
>> Estelle Weyl: It would go shorter because there's now seven.

[00:00:51] So however many widths or sizes rather, that I declare
>> Estelle Weyl: In the grid template columns, that's how many columns there's going to be as I go across. Unless I position another one outside of that bounding box and then the gird will grow, and we'll show you how to do that in a bit.

[00:01:15] In terms of the rows, I declared similarly, 10 pixels high, 20 pixels, 40 pixels, 80 pixels, 160, 320, and 640. And as you see each grid down here, each row is twice as high as the previous one. And I would need one extra list item here to actually fill that in.

[00:01:40] So I only have 35 list item, and here I'm declaring 6 values. So I have room for 36.
>> Estelle Weyl: I'll show you how to position one of them into that spot in a little bit. Then I said list style type nine because I was actually using list items.

[00:02:01] And I didn't want to have the numbers there, because that's ugly. And then I've added a group gap of 20 pixels so between each row and each column there is 20 pixels. And just to show that live I can bring it down to 10 I can bring it up to 30.

[00:02:17] I happen to think that it looks best at 20.
>> Estelle Weyl: And then I got rid of the numbers because originally I had put numbers in each one and it didn't look very good. So I'd count it originally. So that's what I did, lets check the grid steps trying it out.