User guide
CSS Grid creates two-dimensional grids. grid-template-columns: repeat(3, 1fr) creates 3 equal columns; the fr unit distributes available space.
- Combine with
minmax()andauto-fillfor responsive grids. gapcontrols spacing between rows and columns.
FAQ
What is the fr unit?
fr (fraction) distributes the remaining space: repeat(3, 1fr) creates three equal-width columns that adapt to the container.
Grid or Flexbox?
Grid excels at 2D layouts (rows AND columns), Flexbox at single-axis alignment.