Grid by Example

A collection of usage examples for the CSS Grid Layout specification.

Explicit and Implicit Grid

When we use grid-template-columns and grid-template-rows we create an Explicit Grid. However if we try and place an item outside of that grid the browser will create an Implicit Grid line or lines in order to hold that item.

In the code below I have put e between grid column lines 4 and 5, these are not described with grid-template-rows, so an implicit grid line 5 is created.

By default the implicit grid tracks created by the implicit lines will be auto sized. However, you can size the tracks with the grid-auto-columns and grid-auto-rows properties. I have sized my auto tracks as 100px to match the rest of the column tracks in my grid.

Read the specification | View example as full page

See the Pen Grid by Example 10: Explicit and Implicit Grid by rachelandrew (@rachelandrew) on CodePen.

Back to list of examples