Spanning Columns

[00:00:00]
>> Kevin Powell: Another really cool thing that we can do with grid is to span columns. This is a bit of a superpower for grid in terms of creating a bit more dynamic layouts because you might not always just want three columns or four equal columns. So there is a way to span. This is on the grid item itself, where we will say grid item and how many columns do you want to span. So actually I was going to do this as a bit of a challenge, but we'll just dive into it as our example that we're going to use here, where I have this layout.

[00:00:29]
I'm saying that we're going to create three columns with grid, create a three column grid with a gap as our first step. Okay, that's easy, we've seen how to do that. Display grid with a gap, let's do 21 pixels again, so we have a healthy gap. Now if we look at what we're getting, oh, I didn't create three columns. I only added the gap. We need three columns, they said. Grid template. The worst thing with grid-template-columns is such a long declaration.

[00:00:59]
And then we want a repeat 3 1fr. There we go, we've seen all that repeating things is good. So we have three columns, not going to worry about the media query for now, but it creates three columns that looks like this. And if I look at the HTML, I have my H1 as a direct child, so it gets the first cell. The next paragraph is this one, it gets that, and then I have these divs that have a border on them.

[00:01:22]
So each one of those here is getting one of those cells. We've only created three columns. There's more than three direct children, so we have more than three grid items, fills up the three columns. I don't have any more room. Create a new row, these wrap down and just continue flowing into the next columns. What we can do though is now select one of those elements. So let's go and select that H1.

[00:01:47]
I think I have a selector for it down here. No, I don't, but I said we want to select it. So have the main heading span across two columns. So on this, that's our H1, select it, open close curly braces, and we saw in the lesson it's a grid column, and I want it to span. So I just write span 2, and it will go across two columns. If we go and take a look, because Grid Inspector is always your best friend and how it's working, it's now said that this isn't only taking up one of those cells, it's now taking up two of the cells.

[00:02:24]
So this content can't live there anymore, that's already occupied, it gets pushed over to the next one. These three flow down and they start going over down here, and all of a sudden it's made a little bit more of an interesting layout with this big title stretching across a couple of columns. So spanning across like that can be really useful. You can also span across rows as well, so here, instead of a grid column, I could switch this to a grid row and take a bit of a different approach to it.

[00:02:57]
Oh, in this case, it's not working. Let's do both. Sorry, it is working in a sense, it doesn't look fantastic. Oops, let's take this off. If we had more space, it might look a bit better. There we go. So this is now going, okay, I'm going to stay in my column that I'm in, but you're telling me my row is going to span across too. We had two rows there that I could span across, so it takes the space going down, so this one can't live underneath it anymore, that cell's being occupied by the title.

[00:03:27]
And then it gets pushed over and we get a bit of a different layout. So we can span across rows or columns without any issue, and you can span across both at the same time. You can span across as many as you want. Span 2, I think this is going to really break our layout, but you have the option. It's taking up a whole bunch of space, it's pushing things down further, doesn't really work, but just to say you are able to span across as many as you'd actually like.

[00:03:56]
The interesting thing with spans as well, let's take that off, and we're going to do it on this one. So that would be my, do I have a class there? No, I'm going to give that a class of example, just so we can select it nice and easily for this demo. Example grid column span 2 and it's going to span across to starting where it already was, which is a good thing. If you start learning more about grid, you're going to start learning about line numbers.

[00:04:27]
Line numbers are fantastic. They're actually using grid column, you have starts and ends for grid column, and that's where things start getting more complicated, and you start running into these things of trying to manage where things are on your grid. I really like the span keyword because it's just stay where you are, but just take up this extra space instead of living in your one single cell that you were in before.