CSS Grid – Fundamentals

CSS Grid provides a two‑dimensional layout system.

• Define a grid container: display:grid;.
• Set columns/rows: grid-template-columns: repeat(12, 1fr);.
• Place items with grid-column, grid-row or shortcut grid-area.
• Gap – grid-gap / column-gap / row-gap.

---

Example: Simple 12‑col layout

.container {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:1rem;
}
.sidebar { grid-column:1 / span 3; }
.main { grid-column:4 / span 9; }