5. CSS Grid – dwuwymiarowe układy

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

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 */

/* 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 */

• 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)

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)