CSS Grid Basics

Define columns with grid-template-columns

Set display: grid and describe the columns. The fr unit means “a fraction of the free space”, so 1fr 1fr 1fr makes three equal columns.

<style>
  .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .grid > div { background:#4338ca; color:#fff; padding:20px; border-radius:10px; text-align:center; }
</style>
<div class="grid">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

display: grid turns the container into a grid, and grid-template-columns: 1fr 1fr 1fr defines three columns. The fr unit means “a fraction of the leftover space”, so three equal 1fr columns split the width evenly into thirds. The six child <div>s simply flow into the grid — three per row, then wrapping to the next row automatically — with gap: 12px spacing every cell. Unlike flexbox, this lines items up in both rows and columns at once.

Responsive grids with repeat() + minmax()

This one line makes a grid that fits as many columns as possible and wraps automatically — no media queries needed.

<style>
  .auto { display: grid; gap: 12px;
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .auto > div { background:#06b6d4; color:#fff; padding:24px; border-radius:10px; text-align:center; }
</style>
<div class="auto">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>

This single line makes a fully responsive grid with no media queries. Read repeat(auto-fit, minmax(120px, 1fr)) as: “fit as many columns as you can; each column should be at least 120px but may stretch to share leftover space (1fr)”. On a wide screen you get many columns; as you narrow the preview, columns drop off and the items reflow to fill the space. minmax sets the min/max size of each column, and auto-fit decides how many fit.