Join Morten Rand-Hendriksen for an in-depth discussion in this video How implicit lines work, part of CSS Grid: First Look.
- [Voiceover] If I define my grid and set up three columns…100px, 200px, 100px but omit the grid-template-rows property…the grid still shows my content…in rows if rows are necessary.…This is what is known as implicit lines.…Implicit lines appear when we provide…more content within the grid…than the grid can position within the defined lines.…Because the grid automatically populates…its grid cells with the children of the main element…there will be invariably be times…when there are more children…than there are defined grid cells.…
In those cases, the browser creates new lines…to add cells for these children.…The lengths of the new grid lines…are set to the implicit lengths of…the elements that need to be placed in accordance…to the overall layout of the grid.…Implicit lines can also appear…if we manually position an item outside the explicit grid.…In those cases the browser will add whatever implicit lines…are necessary to make that happen.…And that may include collapsing a set of grid lines…by setting their lengths to zero.…
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