Join Morten Rand-Hendriksen for an in-depth discussion in this video Position content in cells, part of CSS Grid First Look.
- [Voiceover] The true power of CSS grids…comes from the forefront when you realize…you can override the automatic placement…of an item on the grid…and specify exactly where you want each item to appear.…I gave you a preview of this…when we talked about implicit lines…and now we'll take a closer look.…The position of an item in the grid…is defined by what grid line,…column, or row the content starts and ends at.…In effect we are saying,…hey item, I want you to start at column line two…and end at column line three.…Start at row line three and end at row line four.…
This can be expressed using the properties…grid-column-start, grid-column-end,…grid-row-start and grid-row-end.…Needless to say this syntax is rather clunky…so there are shorter versions.…The most practical ones are grid-column and grid-row…where the start and end values…are separated by a Forward Slash.…Using these properties we can reorganize…the content in our grid any way we want.…If we look at the layout in my grid right now…you'll see that content is automatically placed by the grid.…
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