CSS Grid Fundamentals

Flexbox is one-dimensional (a row or a column). CSS Grid is two-dimensional — rows and columns at once — which makes it the best tool for page layouts and card grids. It is more powerful than it first looks, but the fundamentals are simple.

Defining a grid

Add <code>display: grid</code> and define columns with <code>grid-template-columns</code>. The <code>fr</code> unit means "a fraction of the free space", so <code>1fr 1fr 1fr</code> makes three equal columns. <code>gap</code> spaces the cells.

<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.grid div{background:#7c3aed;color:#fff;padding:20px;border-radius:8px;text-align:center}

repeat() and mixed tracks

Typing <code>1fr 1fr 1fr 1fr</code> gets tedious, so use <code>repeat(4, 1fr)</code>. You can mix fixed and flexible tracks too: <code>grid-template-columns: 200px 1fr</code> makes a fixed sidebar plus a flexible main area.

<div class="layout"><aside>Sidebar</aside><main>Main content area</main></div>

.layout{display:grid;grid-template-columns:160px 1fr;gap:12px}
aside{background:#1e293b;color:#fff;padding:18px;border-radius:8px}
main{background:#e2e8f0;padding:18px;border-radius:8px}

Responsive grids without media queries

A magic pattern: <code>repeat(auto-fit, minmax(200px, 1fr))</code> creates as many columns as fit, each at least 200px, wrapping automatically. This builds a responsive card grid with no media queries at all.

<div class="cards"><div>A</div><div>B</div><div>C</div><div>D</div></div>

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.cards div{background:#0d9488;color:#fff;padding:24px;border-radius:8px;text-align:center}

Spanning cells

An item can span multiple columns or rows with <code>grid-column: span 2</code> — perfect for featured cards or headers that stretch across the grid.

/* a simple nav row */
.nav { display: grid; }

.nav { display: flex; justify-content: space-between; }