Learn how to place grid items in locations on the grid.
- [Instructor] Next, we're going to look at how to move items around in the grid. They don't have to be displayed in the order they are in the HTML and they don't always have to take up only one cell in the grid. In the code, you can see that I've already defined three columns and two rows. We can place grid items directly into grid cells, but we need a way to specify the location we want. This is done through the grid line numbers. From the dev tools, you can see the line numbers. The vertical lines, you'll see the line numbers at the top, one, two, three, four. And the horizontal lines numbered on the left are one, two, three, four, five.
You can also see there's negative numbers on the bottom and right side. These can be used to place grid items as well and they're handy if you want to count from the last grid line, but you don't know its number or the number may vary. So down on the bottom, we see negative one, negative two, negative three, and negative four. Now, on the right, we have numbers starting with negative one, but they don't start from the bottom. There's a reason for that. In the code, we only define two rows. So we have two explicit rows and the rest are implicit rows. The negative line numbers are only assigned around the explicit rows.
We're going to be moving item four around, so I already gave it a background color so it's easy to see. The first properties we'll look at are grid-column-start, which sets the horizontal starting location of a grid item, grid-column-end, which sets the horizontal ending location of a grid item. So in the code, I'm going to go on line 15 and assign a style to item four and it's gonna be grid-column-start: two. The column is gonna start at line two.
And I go over and refresh. So now, you can see item four is starting at line two. How this works is it places the first three items, then when it gets to number four, it needs to be starting at the second line. Skips ahead through the cells until it gets to an empty cell which starts at line two and that's where it places that grid item. Then the spaces it skipped over stay empty and the next item follows number four. Now, you might want those spaces left empty or you might not. If you want the grid to go back and fill in the spaces you skipped, you can use the property grid-auto-flow and set it to dense.
For the container, I'm going to go on line 14 and do grid-auto-flow: dense. Save and refresh. And now, instead of there being an empty space, it took the next item, item five, and placed it in that space. So now, we're going to use grid-column-end to tell that grid item where to end. So on line 18, I'm gonna do grid-column-end: four, so it ends at line four. Save and refresh.
So now, that grid item takes up two cells, going from line two to line four. You can also combine grid-column-start and grid-column-end in one declaration of grid-column. To do that, I'm gonna take out grid-column-start and grid-column-end and do grid-column and then colon, and we have the starting and ending values, which we separated with a slash, so two / four. So I'm gonna refresh and that's the same because I replaced the same numbers that I took out in the two separate declarations.
You can also count from the end, so I can do grid-column-end: negative one. Save and refresh. Now that grid item ends at negative one, which is the last line. You can also specify only a start or ending point, but then say how many columns you want it to span. So instead of grid-column-end, I'm gonna replace that with grid-column, colon, start at line two, slash, and then span two to tell it to span two cells.
Save and refresh. Now, it starts at line two and spans two cells. You can also do this with rows. It works the same. You have grid-row-start and grid-row-end to set vertical starting location and vertical ending location of a grid item. Or they can be combined together in the same way in grid-row with the starting and ending number. Back on item four, I'm gonna add another line of CSS and it's gonna be grid-row: three / span two.
That's gonna start at the third line and span two cells. There we go, it's spanning two cells going in both those directions. If you only tell the browser the row or the column where you want the grid item to be located, it will find the next available open space that meets those requirements. But if you specify starting and ending locations for both the row and column, it will go exactly there. What's really interesting about this is since you're telling it exactly where to place your grid item, it will follow your instructions even if they overlap.
So I'm gonna add one more, which is item seven. And I'm gonna give that a grid-row: one / span three and then grid-column: two / span two. And save and refresh. It put both grid items exactly where you said and the rest of the items fill in the empty space. If you've done this and you wanna change which one overlaps the other, you can do that using Z index, which we looked at earlier.
And one final property you might use is grid-area, which is shortcut for grid-row-start, grid-column-start, grid-row-end, and grid-column-end. To use that one, you just enter the four numbers in that order separated by slashes.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox