5. CSS Grid – dwuwymiarowe układy

Grid pozwala tworzyć prawdziwe siatki 2D – idealne na galerie, dashboardy, strony z nagłówkiem, sidebar i treścią.

Dlaczego to ważne?

Grid umożliwia złożone układy 2D bez hacków, jest responsywny i wspiera subgrid w 2026.

Podstawy CSS Grid

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;     /* 3 kolumny – proporcje */
  grid-template-rows: auto 1fr auto;      /* 3 wiersze */
  gap: 1.5rem;                            /* odstępy między komórkami */
  min-height: 80dvh;
}

Najważniejsze właściwości

/* na kontenerze */
display: grid;
grid-template-columns: repeat(3, 1fr);     /* 3 równe kolumny */
grid-template-rows: repeat(2, minmax(150px, auto));
gap: 1.5rem;                               /* row-gap + column-gap */
grid-auto-rows: 120px;                     /* domyślna wysokość nowych wierszy */
grid-auto-flow: dense;                     /* wypełnia luki */

/* na dziecku */
grid-column: 1 / 3;                        /* od kolumny 1 do 3 (2 kolumny) */
grid-row: 2 / 4;                           /* od wiersza 2 do 4 */
grid-column: span 2;                       /* zajmuje 2 kolumny */
place-self: center;                        /* center w pionie i poziomie */

Grid-template-areas i subgrid

.grid {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
}

header { grid-area: header; }
.sidebar { grid-area: sidebar; display: subgrid; } /* subgrid dla zagnieżdżonych grid (2026) */

Narzędzia

W DevTools (F12) włącz Grid inspector: Layout → Grid, by wizualizować linie i areas.

• repeat() – powtarza kolumny/wiersze
• fr – ułamek wolnej przestrzeni
• minmax(min, max) – elastyczna kolumna
• auto-fit / auto-fill – responsywne kolumny bez media queries
• gap – odstępy (zastępuje margin)
• grid-template-areas – nazwy obszarów dla łatwego layoutu
• grid-auto-flow: dense; – wypełnia luki automatycznie
• subgrid – dziedziczy grid rodzica (wsparcie 2026)

Zadanie

W pliku style.css i index.html:

• zrób siatkę 3-kolumnową na desktopie, 2-kolumnową na tablecie, 1-kolumnową na mobile (użyj auto-fit)
• niech jeden element zajmuje 2 kolumny i 2 wiersze
• dodaj gap: clamp(1rem, 3vw, 2rem)
• wyśrodkuj zawartość każdej komórki (place-items: center)
• użyj grid-template-areas dla layoutu strony (header, sidebar, main)