CSS Master Code Examples: Chapter 5

Back to chapter demo list

Repeating grids

In this example, we've created row and column track lists of 1fr, and indicated that these should repeat: grid: repeat(3, auto) / repeat(4, 1fr);. Notice that the auto in repeat(3, auto) means that size of each row to expand or shrink to fit the grid item with the longest content, but repeat(4, 1fr) results in equally-proportioned columns.

Related specification: CSS Grid Layout Module Level 1.

Grid item A
Grid item B
Grid item C

Grid item D

This grid item contains more content than its siblings.

Grid item E
Grid item F
Grid item G
Grid item H
Grid item I
Grid item J