CSS Grid

Ce este CSS Grid

Grid e sistemul de layout pe două dimensiuni: definești pe părinte rânduri și coloane, iar copiii se așază în celule. E cel mai puternic instrument de layout din CSS.

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

Unitatea fr

fr = o fracțiune din spațiul rămas. 1fr 2fr → a doua coloană e de două ori mai lată decât prima.

Grid responsive fără media queries

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

Încape câte coloane de minim 16rem pot intra; restul se distribuie egal. Pe mobil — o coloană, pe desktop — 3 sau 4, automat.

auto-fit vs auto-fill: cu puține elemente, auto-fit le întinde să umple rândul; auto-fill păstrează coloane goale.

Plasarea copiilor

.featured { grid-column: span 2; }        /* ocupă 2 coloane */
.full     { grid-column: 1 / -1; }        /* de la prima la ultima linie */
.sidebar  { grid-row: 1 / 3; }            /* două rânduri */

Liniile grid-ului sunt numerotate de la 1; -1 e ultima.

Zone cu nume

Pentru layout-uri de pagină, zonele sunt cele mai lizibile:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.layout header { grid-area: header; }
.layout aside  { grid-area: sidebar; }

Aliniere

Tipuri de layout cu grid — și când

Pe scurt

• Grid = rânduri + coloane, definite pe părinte.
• fr împarte spațiul rămas; minmax + auto-fit = responsive fără media queries.
• Flex pentru o axă, grid pentru două.

Surse oficiale

• MDN — Grids
• MDN — Basic concepts of grid layout
• Grid Garden (joc)