CSS Master Code Examples: Chapter 5

Back to chapter demo list

Specifying a default size for implicit grid tracks

We've explicitly defined three columns for this grid using grid-template-columns: 25rem 40rem 25rem and two rows using grid-template-rows: 25rem 15rem;.

Since our grid container has eight children, we also have a third grid row. In the implicit grid example, our third row or grid track size was auto. Here, we've used the grid-auto-rows property to set a size of 12rem for all implicit tracks. We can use grid-auto-columns to do the same for columns.

Related specification: CSS Grid Layout Module Level 1.

Grid item A
Grid item B
Grid item C
Grid item D
Grid item E
Grid item F
Grid item G
Grid item H