CSS Subgrid - współdzielenie siatki z potomkami

Wyobraź sobie wielką piramidę w Gizie. Jej konstrukcja opiera się na precyzyjnej siatce kamiennych bloków, która przenika przez wszystkie warstwy budowli - od fundamentów, przez komory, aż po szczyt. Każda wewnętrzna komora jest idealnie wyrównana z zewnętrzną strukturą. Dokładnie tak działa CSS Subgrid - pozwala elementom potomnym dziedziczyć i współdzielić siatkę rodzica, zapewniając idealne wyrównanie na wszystkich poziomach zagnieżdżenia.

Problem, który rozwiązuje Subgrid

Bez subgridu, kiedy tworzysz zagnieżdżony grid, element potomny tworzy swoją własną, niezależną siatkę. To tak, jakby budować mniejszą piramidkę wewnątrz wielkiej piramidy, ale bez zachowania wyrównania z głównymi blokami.

Rozważmy typowy przykład - siatka kart, gdzie każda karta ma nagłówek, treść i stopkę. Chcemy, aby nagłówki wszystkich kart były wyrównane, treści wyrównane i stopki wyrównane - niezależnie od ilości tekstu w każdej sekcji.

Bez subgridu - problem wyrównania

1.grid {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  gap: 1.5rem;
5}
6
7/* Każda karta ma WŁASNY grid - brak wyrównania między kartami! */
8.card {
9  display: grid;
10  grid-template-rows: auto 1fr auto;
11}

W tym przypadku nagłówek jednej karty może być wyższy niż w innej, przez co treści i stopki nie są wyrównane w jednej linii. To tak, jakby wewnętrzne komnaty piramidy nie pasowały do zewnętrznej siatki bloków.

Z subgridem - idealne wyrównanie

1.grid {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  /* Definiujemy wspolne wiersze dla WSZYSTKICH kart */
5  grid-template-rows: subgrid;
6  gap: 1.5rem;
7}
8
9.card {
10  display: grid;
11  /* Karta DZIEDZICZY wiersze od rodzica */
12  grid-template-rows: subgrid;
13  /* Karta zajmuje 3 wiersze rodzica */
14  grid-row: span 3;
15}

Teraz nagłówki, treści i stopki wszystkich kart są idealnie wyrównane - ponieważ wszystkie korzystają z tej samej siatki wierszy.

Składnia Subgrid

Subgrid stosuje się jako wartość grid-template-columns lub grid-template-rows (albo obu naraz):

1/* Subgrid tylko dla kolumn */
2.child {
3  display: grid;
4  grid-template-columns: subgrid;
5}
6
7/* Subgrid tylko dla wierszy */
8.child {
9  display: grid;
10  grid-template-rows: subgrid;
11}
12
13/* Subgrid dla obu osi */
14.child {
15  display: grid;
16  grid-template-columns: subgrid;
17  grid-template-rows: subgrid;
18}

Element potomny musi:

1. Mieć display: grid
2. Być bezpośrednim dzieckiem elementu z gridem
3. Zajmować co najmniej 2 ścieżki w osi, w której używa subgridu

Praktyczny przykład: układ kart

1.gallery {
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  gap: 1rem;
5}
6
7.card {
8  display: grid;
9  /* Dziedzicz kolumny rodzica - tu niepotrzebne, bo karta zajmuje 1 kolumne */
10  /* Dziedzicz WIERSZE - tu uzyteczne */
11  grid-row: span 3;
12  grid-template-rows: subgrid;
13  border: 2px solid #d4af37;
14  border-radius: 8px;
15  overflow: hidden;
16}
17
18.card-header {
19  background: #8b6914;
20  color: white;
21  padding: 1rem;
22}
23
24.card-body {
25  padding: 1rem;
26}
27
28.card-footer {
29  padding: 1rem;
30  background: #f5f1e3;
31  border-top: 1px solid #d4af37;
32  align-self: end;
33}

Subgrid a zwykły zagnieżdżony grid

Kluczowa różnica polega na współdzieleniu ścieżek:

1/* Zwykly zagniezdz. grid - NIEZALEZNA siatka */
2.parent {
3  display: grid;
4  grid-template-columns: 200px 1fr 200px;
5}
6
7.child-normal {
8  grid-column: 1 / -1;
9  display: grid;
10  /* Tworzy własną siatkę 3-kolumnową, ale ROZMIARY mogą się różnić */
11  grid-template-columns: 200px 1fr 200px;
12}
13
14/* Subgrid - WSPOLDZIELONA siatka */
15.child-subgrid {
16  grid-column: 1 / -1;
17  display: grid;
18  /* Uzywa DOKLADNIE tych samych kolumn co rodzic */
19  grid-template-columns: subgrid;
20}

Przy zwykłym zagnieżdżeniu, wartości 200px w dziecku i rodzicu mogą się różnić (np. przez gap). Subgrid gwarantuje dokładne dopasowanie, bo dziecko dosłownie używa tych samych linii siatki co rodzic.

Zastosowania Subgrid

1. Formularze z wyrównanymi etykietami

1.form {
2  display: grid;
3  grid-template-columns: 150px 1fr;
4  gap: 0.75rem 1rem;
5}
6
7.form-row {
8  display: grid;
9  grid-column: 1 / -1;
10  grid-template-columns: subgrid;
11  align-items: center;
12}
13
14.form-row label {
15  text-align: right;
16  color: #8b6914;
17}

2. Galeria z subgridem dwuosiowym

1.mosaic {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4  grid-template-rows: repeat(3, 200px);
5  gap: 0.5rem;
6}
7
8.mosaic-item-large {
9  grid-column: span 2;
10  grid-row: span 2;
11  display: grid;
12  grid-template-columns: subgrid;
13  grid-template-rows: subgrid;
14}

Wsparcie przeglądarek

Subgrid uzyskał pełne wsparcie we wszystkich głównych przeglądarkach w 2023 roku (Chrome 117, Firefox 71, Safari 16). Możesz bezpiecznie stosować go w nowoczesnych projektach, opcjonalnie z fallbackiem:

1.card {
2  display: grid;
3  /* Fallback - własny grid */
4  grid-template-rows: auto 1fr auto;
5}
6
7@supports (grid-template-rows: subgrid) {
8  .card {
9    grid-row: span 3;
10    grid-template-rows: subgrid;
11  }
12}

Subgrid to jedna z najważniejszych nowości w CSS Grid, która rozwiązuje realne problemy z wyrównaniem elementów w zagnieżdżonych siatkach. Jak precyzyjna siatka kamiennych bloków w piramidzie Cheopsa - zapewnia idealne dopasowanie na każdym poziomie konstrukcji.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>CSS Subgrid</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>CSS Subgrid - Galeria Egipskich Artefaktow</h1>
10    <div class="gallery">
11        <article class="card">
12            <header class="card-header">Skarabeusz</header>
13            <div class="card-body">
14                <p>Symbol odrodzenia i ochrony. Nosili go faraonowie jako amulet.</p>
15            </div>
16            <footer class="card-footer">Datowanie: 1500 p.n.e.</footer>
17        </article>
18        <article class="card">
19            <header class="card-header">Maska Tutanchamona</header>
20            <div class="card-body">
21                <p>Zlota maska pogrzebowa mlodego faraona. Wykonana z ponad 10 kg czystego zlota, zdobiona lapis lazuli i turkusem.</p>
22            </div>
23            <footer class="card-footer">Datowanie: 1323 p.n.e.</footer>
24        </article>
25        <article class="card">
26            <header class="card-header">Ankh</header>
27            <div class="card-body">
28                <p>Klucz zycia - symbol wiecznosci.</p>
29            </div>
30            <footer class="card-footer">Datowanie: 2000 p.n.e.</footer>
31        </article>
32    </div>
33</body>
34</html>