Grid Span & Repeat

[00:00:00]
>> All right, we are moving on to chapter 4. So this point in time, we have talked about grid and its syntax in terms of the grid row and grid column using numbers. But I told you there are three kinds of syntax that are available to us with grid.

[00:00:17]
And the second kind that we're gonna look at is called the span syntax. So I'm gonna walk you through exactly how the span syntax works. And if you open up your opening code pen here and fork that to your account, we're still working with our moons. All right, so I've scrolled down here to roughly line number 13 here in my CSS, and it says figure:nth-child(3).

[00:00:42]
So this is that picture of Europa here that we had talked about before. We had told it to span across the first column from 1 to 2, and we said to span rows, 1 as the first line, 5 as the last line here in space. So there are other ways of writing this kind of syntax.

[00:01:04]
And using the span syntax, we could do something like this instead, we could say something like span 3. So by saying span 3, what this is going to do is from where Europa is in space, which is now, remember, that's the third child, span over three rows. So from the third row, it's going to span over three additional rows.

[00:01:30]
That means that we only have one moon next to us, because that's all the additional content that we have. We had more moons, we would have those three moons would be next to Europa. So what if I want it to still be the first item? Then I could say 1/span 3.

[00:01:50]
So in other words, start at the first line and then span three rows after that. Make sense, kinda sort of, okay? Just to sort of repeat, when you just say span 3 by itself, this is gonna mean from wherever you are in space span over 3 whatever. We could do this with three columns or three rows.

[00:02:14]
In this case, it's three rows. If you give it a starting point with a number, then it will span 3 from that particular starting point. So from 1, span over 3. Make sense, kinda sort of, okay? So by that logic, when we're here at grid column, we really only have to save one.

[00:02:37]
By default, it will span to 2, okay? Now, just cuz you can say just one doesn't necessarily mean that this is the best to communicate to all of the other people who are gonna be writing code with you. Yeah, I think 1/2 looks a little bit more intuitive than we're really clear about what's going on here.

[00:02:59]
But in this case, you could just say 1, and it will work just fine. So how about this last child, Ganymede, down here? So if I said, figure: last-child, And I want this one to span across two columns just to show you how that works, what would I put here for grid-column using the span syntax?

[00:03:26]
>> And 1 slash or 1 slash span.
>> 1/span 2, yeah. There you go. So start over here in the first column, span over two columns. That does exactly what it should be doing. Like I said, in a lot of cases, you can just stick with the numbers.

[00:03:53]
They're totally fine. I find the numbers really intuitive and I use them a lot. Span becomes helpful if you are gonna write a more generic style and you wanted to just span over 2, whatever, I want it span over three rows. Whenever I sign this class, the thing is gonna span over three rows wherever it is in space.

[00:04:12]
That might be useful for that, okay? The other thing I wanna introduce at this point is up here on our grid container. Now, to this point, we have been writing out however many columns we have. And it hasn't been a big deal, cuz we have two columns or we have three columns, so what?

[00:04:29]
But sometimes you might wind up with ten columns and writing 1 fr ten times in a row is a real pain in the neck, wouldn't you agree? Okay, so there is a better syntax for this, and that is the repeat syntax. So we can swap this out for repeat, and then I would say 2, 1fr.

[00:04:53]
Nothing is gonna change here in the way the page looks. This is exactly the same thing. So now I'm telling to make two columns that are 1fr, make sense? So for my grid template rows where I have three autos in a row, how would I write this with the repeat syntax?

[00:05:14]
What would I say here?
>> Pitch it like repeat, three auto.
>> Repeat (3, auto), exactly. So the number, comma, the size, whatever that size happens to be. fr's are really convenient, autos are convenient for rows. Could be anything, makes sense? Okay, fantastic, so those mean exactly the same thing, you can write them however you want.