Card Grid

Named Grid Areas

Define your layout with readable area names instead of column and row numbers.

Let the browser decide how many columns fit using auto-fit and minmax.

Use content-driven sizing when items should determine their own width.

Write layouts that work naturally in both left-to-right and right-to-left reading modes.

Use min-content, max-content, and fit-content() to let content drive its own dimensions.

Control how images and media fill their containers with aspect-ratio and object-fit.