Grid Span & Repeat Exercise

[00:00:00]
>> Okay, great, time for you to go ahead and give the span syntax a try. So, we're gonna go back to our Martian example. If you go back to the beginning CodePen here, all right? What I'd like for you to do is refactor this code. All of these numbers that are here.

[00:00:21]
So, you don't have to change the HTML, just refactor the numbers that we have here so that you're working with the span, syntax, and grid. In other words, nothing is gonna change on the page, it's gonna look exactly the same when you're done. You are just changing the syntax from numbers to working with span.

[00:00:42]
Okay, so I'll just show you what my CSS look like here. So for number one, you could have said 1/ span 3, or you could just say span 3, it's already starting at 1. So in this particular case, either one of those would work, so you could say 1/ span 3, or you could say just span 3, either one of those.

[00:01:05]
But for image number two, we're starting in column number one. And then for the rows, we start at two and we span over two, so I think two is Mars here, if I'm not mistaken, yeah, two is Mars. So we start at one and we span over because this is one fat column.

[00:01:29]
So that's what's happening there. For image number three, I think it's this one, 1/span 2, four, we could just give it the number of the column, would start at column two, start at row number two. And then for five down here in the bottom, we've rewritten this such that it's number two and number three, for where it starts, okay?

[00:01:54]
So this is just a simple conversion from the numbers that we had before, like 1/3, 2/3, we've just converted them to the different syntax. Again, you can use whichever one of these syntaxes make most sense to you.