CSS Grid - The Hidden Parts

June 22, 2020

Grid template larger than container

Having the grid template exceed the size of the container is useful when you want the layout "footprint" of the grid element be smaller than it's visual/presentational size.

If you define an element to be 100px by 100px, but you want to define a grid template that is 200px by 200px, what happens?

The grid template will exceed the size of the container, in effect the grid becomes uncoupled from its element.

You can control the alignment of the grid template, the direction of overflow, using justify-content and align-content on the grid container. In effect, the grid template itself is treated as the content of the grid container, and you can use grid-item alignment properties to control its alignment.