CSS Grid

Flexbox lays items out in one direction, while Grid lays them out in two at once, in columns and rows. That's why Grid is shorter and clearer whenever your layout really is a grid.

The line grid-template-columns: repeat(3, 1fr) creates three equal columns. The fr unit means “a share of the remaining space”, not a fixed size.

The most powerful line in Grid is this one: repeat(auto-fit, minmax(160px, 1fr)). It builds a grid that picks its own number of columns based on the available width, without a single media query.