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