Join Morten Rand-Hendriksen for an in-depth discussion in this video Make content span multiple cells, part of CSS Grid: First Look.
- [Voiceover] As you may have guessed when I showed you…how to position items within the grid in the previous movie,…we are not restricted to positioning items…within a single cell.…Because the grid-column and grid-row property…take values of start and end lines…we can define any line as a start…or end for the item in question.…In the previous movie I reorganized the content in the grid…by defining two adjacent grid lines,…both in columns and rows.…Let's see what happens if I decide to make an item span…more than two cells by changing the end line.…
So I'll grab this one here, box nine,…which has the class linepurple.…I've worked with that one previously so I know it works.…Here I'm going to change the grid-column value…from 1/2 to 1/4.…Now the item starts at line one…and ends at line four.…Meaning it spans the entire width of the grid.…Because we now span the entire width of the grid,…we are covering an existing cell…that had an auto-placed item…and that's why we have box 21 down here.…However, we are also covering an explicitly placed item…
Join Morten Rand-Hendriksen in this course for a first look at this emerging CSS module. He covers setting up CSS grids, positioning content, and working with named lines and template areas. The final videos in the course introduce practical uses for CSS grids, including online magazines and three-column layouts.
- What is CSS Grid?
- Using the CSS Grid playground
- Setting up a CSS grid
- Positioning content in a CSS grid
- Using template areas in a CSS grid
- Creating a responsive grid layout