Grid Intro

Grid Intro

CSS Grid is a layout system designed for building two-dimensional layouts (rows and columns). It is ideal for page layouts, dashboards, card grids, and complex UI structures.

Grid works best when you want precise control over:

• columns and rows
• gaps between items
• item placement across multiple rows/columns
• responsive layouts with fewer breakpoints

Grid Container

To use Grid, set display: grid on a container. The direct children become grid items.

.grid {
  display: grid;
}

Most grid layouts start by defining columns and/or rows:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

Columns, Rows, and Tracks

In Grid, each column/row is called a track.

• grid-template-columns defines the column tracks
• grid-template-rows defines the row tracks
• gap sets spacing between tracks

.grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

fr Unit and repeat()

The fr unit distributes free space. It is one of the reasons Grid is so convenient.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

repeat() helps write cleaner templates:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

Responsive Grid with minmax()

A very common responsive pattern is auto-fit (or auto-fill) with minmax():

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

This automatically changes the number of columns based on available width, without explicit breakpoints.

Summary

• CSS Grid is a two-dimensional layout system (rows and columns).
• Use display: grid to create a grid container.
• Define tracks with grid-template-columns and grid-template-rows.
• fr, repeat(), and minmax() enable clean responsive grids.