Using the span Keyword to Position Elements
When positioning an element within a grid, we often want the element to span multiple rows or columns. So far we've been using line numbers to do this.
Another way to achieve this is by using the span keyword.
The span Keyword in Action
Let's say we want a red box to start at line 2 and en
Transcript
0:00 Something that we do often when we are positioning an element within a grid is have that element span multiple rows or multiple columns. One way of accomplishing this is using the line numbers. If we look at the row direction, this starts at row three and it ends at row six, meaning it spans three tracks, three cells in the grid.
0:22 There's another way of accomplishing this, though, that some people prefer because you don't have to do any counting. I can instead use the span keyword. Let's just work with one direction. Remember, this is the default. Let's work with the column direction.
0:39 If I want this red box to start at line two and end at line five, we know how to do that. I can use the grid-column-start, grid-column-end, or just the grid-column shorthand. I'll say go from line two to line five. There we go. Simple enough.
0:57 The other option, though, is instead of having to say go to line five, I can use the span keyword and tell it how many tracks I want it to span -- two, three, four. Let's do two just for the sake of seeing something different. There we go. Start at this line. Span two tracks.
1:17 If I want it to span four, you can see, starts at the same spot, but now it ends at line six. I don't have to do the counting. The same works going in the row direction, of course. If I want it to span three rows from where it is right there, I don't even have to specify a start point.
1:36 I can just say this -- grid-row, span 3. It will start where it normally starts and span three rows. I could tell it, actually I want you to start at line three and then span three. Here's line three and then it spans three tracks.
1:53 Just another option for specifying anytime you have an individual element that you want to span multiple tracks. You can use the starting and end lines or you can use the span keyword.
2:06 This also works if we used grid-column-end, grid-row-end, grid-row-start, grid-column-start. I'll just show that real quick. By default, it will start same spot, top-left. If I want it to span all the way down, what I could do is set the row start, the row end, or I could only set the row start, grid-row-start, and set it to span 5.
2:32 I don't have to worry about the lines at all if I want it to just go in its normal spot but span five rows. That's the span keyword.