CSS — Grid

Overview

CSS Grid is a two‑dimensional layout system (rows + columns).

What you'll learn

• grid-template-columns
• gap
• auto-fit/minmax
• alignment

Syntax

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

Example

.grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.card{ padding:14px; border:1px solid #e5e7eb; border-radius:16px; }

Notes

• Great for page layouts.
• auto-fit + minmax makes it responsive.

  Try: Open the Playground: /en/playground/html