CSS Grid — ćwiczenia z tworzenia siatki strony

Flexbox układa elementy w jednym kierunku, a Grid — w siatce wierszy i kolumn naraz. Dzięki temu układ strony, galerii czy panelu opisuje się kilkoma liniami, bez „obliczania” szerokości kolumn. Na lekcji uczniowie budują siatkę o trzech kolumnach i sprawdzają pomiarem, że jednostka fr dzieli wolne miejsce proporcjonalnie, a pola mogą zajmować kilka kolumn.

Scenariusz jest przeznaczony na 45 minut dla klasy znającej Flexbox i jednostki CSS — na przykład po lekcji o Flexboksie.

Przygotowanie stanowisk

Potrzebne są przeglądarka z narzędziami deweloperskimi (F12) i edytor tekstu. Rozpakuj pakiet z sekcji materiałów do osobnego folderu. HTML w obu folderach jest taki sam i jej nie zmieniasz — pracujesz w start/style.css. Po zapisaniu pliku odśwież stronę. Wymiary elementów sprawdzisz w narzędziach deweloperskich (zakładka Elements, panel Computed). Gotowe rozwiązanie jest w folderze rozwiazanie. Internet nie jest wymagany.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• utworzyć siatkę przez display: grid i grid-template-columns;
• obliczyć szerokości kolumn zapisanych w fr i odstępy gap;
• rozciągnąć pole na wiele kolumn (grid-column: 1 / -1, span 2);
• porównać Grid z Flexboksem i wybrać właściwy.

Siatka trzech kolumn

.siatka {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
}

Jednostka fr (*fraction*) oznacza część wolnego miejsca po odjęciu odstępów. Siatka ma szerokość 800 px i dwa odstępy po 16 px, więc na kolumny zostaje 800 − 32 = 768 px, dzielone w proporcji 1 : 2 : 1 — kolumny mają 192 px, 384 px i 192 px. Lewe krawędzie kolumn leżą w odległości 0, 208 (192 + 16) i 608 (208 + 384 + 16) px od lewej krawędzi siatki.

Elementy ustawiają się w kolejnych komórkach siatki wiersz po wierszu. Pole można rozciągnąć na wiele kolumn: grid-column: 1 / -1 oznacza „od pierwszej linii kolumn do ostatniej” (cała szerokość), a grid-column: span 2 — „zajmij dwie kolumny od bieżącego miejsca”. Jeśli pole zajmujące dwie kolumny nie mieści się już w bieżącym wierszu, trafia do następnego, a w poprzednim zostaje pusta komórka (domyślny algorytm rozmieszczania nie cofa się). Pole zajmujące kilka kolumn obejmuje też odstępy między nimi: dwie kolumny 384 + 192 plus odstęp 16 to 592 px.

Grid sprawdza się w układach dwuwymiarowych (strona z nagłówkiem, panelem i treścią, galeria), a Flexbox — w układach jednowymiarowych (rząd przycisków, menu). Oba można łączyć.

Zadania

Zadanie 1. Siatka. Ustaw .siatka jako siatkę o trzech kolumnach 1fr 2fr 1fr z odstępem 16 px. Zmierz szerokości pól 2 i 3 (pierwsze dwie komórki drugiego wiersza).

Zadanie 2. Pole na cały wiersz. Rozciągnij pole #g1 na całą szerokość siatki (grid-column: 1 / -1). Zmierz jego szerokość.

Zadanie 3. Pole na dwie kolumny. Rozciągnij #g4 na dwie kolumny (span 2). Zmierz jego szerokość oraz położenie i szerokość pól 5, 6 i 7.

Dla chętnych: zamień grid-template-columns na repeat(3, 1fr) i sprawdź, jak zmienią się szerokości kolumn.

Rozwiązanie i wyniki

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.siatka {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
  width: 800px;
}
.pole {
  height: 40px;
  background: #dbeafe;
}
#g1 {
  grid-column: 1 / -1;
}
#g4 {
  grid-column: span 2;
}

Pomiary w przeglądarce (siatka 800 px, pola po 40 px wysokości, odstęp 16 px — górne krawędzie wierszy w punktach 0, 56, 112 i 168 px): wiersz 1 — #g1 ma 800 px; wiersz 2 — #g2 ma 192 px (lewa krawędź w punkcie 0), #g3 ma 384 px (w punkcie 208), a trzecia komórka zostaje pusta, bo #g4 zajmujące dwie kolumny już się tu nie mieści; wiersz 3 — #g4 ma 592 px (w punkcie 0), #g5 ma 192 px (w punkcie 608); wiersz 4 — #g6 ma 192 px (w punkcie 0), #g7 ma 384 px (w punkcie 208).

Typowe błędy

Pytania kontrolne i punktacja

1. Ile pikseli ma kolumna 2fr w siatce 800 px z dwoma odstępami po 16 px i kolumnami 1fr 2fr 1fr?
2. Co robi grid-column: span 2?
3. Kiedy wybierzesz Grid, a kiedy Flexbox?

Odpowiedzi: 384 px. Pole zajmuje dwie kolumny. Grid — dla układów dwuwymiarowych (wiersze i kolumny), Flexbox — dla układów w jednym kierunku.

Proponowana punktacja (razem 10 punktów): zadanie 1 — display: grid i kolumny 2 pkt, odstęp i pomiar 1 pkt; zadanie 2 — grid-column: 1 / -1 1 pkt, pomiar 1 pkt; zadanie 3 — span 2 1 pkt, pomiary położenia 2 pkt; wyjaśnienie obliczeń z gap 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet CSS: materiały do lekcji, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej?

Następny krok to siatki elastyczne (repeat, minmax, auto-fit) i obszary nazwane (grid-template-areas). Ten materiał rozwija dział o układzie strony w kursie CSS w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: CSS Grid w MDN oraz grid-column. Zobacz też lekcję o Flexboksie.