Variation 5: Jaclyn's grid layout

- [Rik] So previously we did our own layout, which was eight and then four. And then we've just done Alice's one, which is 12 and then four and then six. How do we do Jaclyn's one, which is six, six, six, six? Now, we're gonna do very similar to what we did previously. We're gonna make a new section in our index.html. And we're gonna call this one, we're gonna go down. Not alice-layout, we're gonna call it jaclyn-layout instead. So we're gonna do a section, and we're gonna open it up.

We're gonna give this one a tag, a class of Jaclyn, spelled like that, layout. And this one's gonna be a grid-layout. Maybe we'll call it grid-layout, just so we can reuse it if we need to. Now in here, what we wanna do is use a 12 column grid in sixes. So what we need to do is, directly inside this, have one div tag, which is gonna be six columns. Then below it, we're gonna have another div tag, which is also six columns.

Now in these two tags what we're gonna say is, this has an image inside and it has some text along with it. So let's just use our own version of this. So again, I'm gonna use lost and found. And I'm just gonna quickly put inside this div tag h2. I'm just gonna tidy this up, lost and found. Now, I'm just gonna copy this from here and put it inside here as well. So I've got a section and two div tags inside of this. Now, we're using my section class grid-layout. I'm gonna lay this out, of course.

So in my style.css, I'm gonna add some space for this. So further down here, where we did Alice's layout, we're gonna use the same idea, section.grid-layout instead. Here, what we wanna do for each of these div tags, 'cause section has the layout and the div is the column size. We're just gonna do grid-column 1 / span 6. Now what this will do, if we have a quick look, is we have our own layout. Then we have Alice's. And then have this grid layout going down the page.

And the reason they're going down the page at the moment, is we say, "Always start in the first column." So one to six, what seven, I suppose. One to the end of six. Now what we can do, is just let the grid work this out. And to do that, what we can say is, "Well, we don't know if it's always gonna start at one. "We know it's gonna span six." So I'm just gonna get rid of this one and this slash. And what this is gonna say is, "Just be six columns, fit in wherever you can." So now what we'll see is this grid layout, one, two.

But if we add a third in here, which is the all important key to this, what we're gonna see is, just automatically, we're adding another div in here. Gonna take this whole div, still within the section, pasting it in. And (mumbles) do it again. Pasting it in. One, two, three, four in there. One, two, three, four. We can see that is automatically fills the grid.

So there's Alice's one. One, two, three, four. Now we might wanna add some spacing in here, for instance. So h2 has a bit of space in using the margin. To do that, all we need to do is add some style. And it's pretty easy to do. We're gonna say, "section.grid-layout." We wanna pick the h2s inside of this. And add some margin, maybe 16 on the top, 16 on the bottom. Let's see how that looks.

So I've just added these two things. And that looks pretty good. And what happens if you want to add some text? Well, the same thing we just added inside the div tag. So, it's just going down the page. So here what we can say is, some paragraph text. Just gonna get this first bit from up here. Paste it in. And you're gonna take the p tag, put it under the h2, still within my div, still within my div. And still within my div, just under the h2 for each one.

So now what we'll get, is something that looks like the layout that we expect. So that was pretty easy. We just added a quick grid layout, exactly what Jaclyn made in hers.