Grid Intro

Grid is for two-dimensional layouts — rows AND columns together. Galleries, dashboards, calendars, full-page layouts.

The Smallest Example

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* three equal columns */
  gap: 1rem;
}

<div class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

Six items in three columns, two rows. No more thinking.

fr — The Grid Unit

1fr means “one fraction of the available space”. Three 1frs split the row into thirds. Mix freely:

grid-template-columns: 250px 1fr 200px;

Fixed sidebar, fluid main, fixed widget — the classic.

repeat()

grid-template-columns: repeat(4, 1fr);     /* four equal columns */
grid-template-columns: repeat(3, 200px);   /* three 200px columns */

Auto-Sizing Columns — auto-fit + minmax

A common pattern: “as many columns as fit, each at least 200px”:

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

• minmax(200px, 1fr) — min size 200px, max 1fr (fill available)
• repeat(auto-fit, …) — as many as fit

Resize the window. Columns add and remove themselves. Zero media queries.

Rows

By default, rows are sized to their content. To set explicit row heights:

.grid {
  display: grid;
  grid-template-rows: 100px 1fr 50px;
  grid-template-columns: 1fr 3fr;
}

gap

Same as flex — space between cells, not before / after:

gap: 1rem;             /* both directions */
gap: 1rem 2rem;        /* row col */

Up Next

The bigger grid toolkit — areas, item placement, alignment.