The fr (fraction) unit represents a share of available space in the grid container. 1fr 2fr creates two columns where the second is twice as wide as the first.

Yes. Any grid item can itself be a grid container. This is useful for complex layouts where a card grid sits inside a page-level grid.

Grid for two-dimensional layouts (rows AND columns). Flexbox for one-dimensional layouts (a single row OR column). They work great together.

What is auto-fit vs auto-fill?

auto-fill creates as many tracks as fit, even if empty. auto-fit collapses empty tracks, letting filled tracks stretch. Use auto-fit for responsive card grids.

How to Use CSS Grid Template Areas (2026)

⬜

Try Grid Template Generator

Free, no signup →