CSS Grid

Czego się nauczysz

Flexbox układa elementy wzdłuż jednej osi: wiersza albo kolumny. Grid od razu dzieli kontener na siatkę wierszy i kolumn, więc świetnie nadaje się do całych układów strony i siatek kafelków.

Po tej lekcji:

• zbudujesz siatkę trzech kolumn za pomocą grid-template-columns,
• użyjesz jednostki fr, żeby podzielić szerokość proporcjonalnie,
• sprawisz, że jeden element zajmie dwie kolumny.

Flexbox kontra Grid

• Flexbox – jeden kierunek naraz. Dobry do menu, list, pojedynczych rzędów kart.
• Grid – oba kierunki naraz. Dobry do układu całej strony (nagłówek, panel boczny, treść, stopka) i do siatek kafelków.

display: grid i grid-template-columns

.siatka {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}

display: grid na kontenerze włącza tryb siatki. grid-template-columns opisuje liczbę i szerokość kolumn – tu trzy kolumny po 100px.

Elementy same wypełniają siatkę wiersz po wierszu. Kolejne wiersze powstają automatycznie, gdy zabraknie miejsca w bieżącym.

Jednostka fr – proporcjonalny podział

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

fr to „fraction”, czyli ułamek dostępnej przestrzeni. Zapis 1fr 2fr 1fr dzieli szerokość kontenera na 4 równe części i przydziela je kolumnom w proporcji 1:2:1. Środkowa kolumna jest dwa razy szersza od pozostałych.

To znacznie wygodniejsze niż ręczne liczenie procentów.

repeat() – skrót dla powtarzających się kolumn

.siatka {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

repeat(3, 1fr) to dokładnie to samo, co 1fr 1fr 1fr. Działa też z konkretnymi szerokościami, na przykład repeat(4, 80px).

Komórka na kilka pól

.szeroki { grid-column: span 2; }
.wysoki  { grid-row: span 2; }

• grid-column: span 2 – element zajmuje dwie kolumny zamiast jednej.
• grid-row: span 2 – element zajmuje dwa wiersze.

Pozostałe elementy same „opływają” większą komórkę i wypełniają siatkę dalej.

gap w Gridzie

gap działa tak samo jak we Flexboksie: jedna wartość to odstęp we wszystkich kierunkach, dwie wartości to osobno odstęp między wierszami i między kolumnami.

Wysokość wierszy możesz ustawić właściwością grid-template-rows, na przykład 60px 60px.

Spróbuj sam

Do tego tematu jest kod: index.html i style.css. Tej lekcji dotyczy część 2 strony, przykłady 2a i 2b.

W pliku style.css:

• w regule .siatka-fr zmień 1fr 2fr 1fr na 2fr 1fr 1fr i zobacz, która kolumna jest teraz najszersza,
• zmień grid-column: span 2 na span 3 w regule .szeroki,
• dopisz w pliku index.html kilka nowych pól do siatki i sprawdź, jak same się układają.

Na karcie pracy do tej lekcji:

• zadania sprawdzające 1–3 – grid-template-columns, fr, repeat(),
• zadania domowe 1–5 – grid-column i grid-row, gap, budowa prostego układu strony.

Sprawdź się

• Zbuduję siatkę trzech kolumn za pomocą grid-template-columns.
• Użyję fr, żeby podzielić szerokość proporcjonalnie.
• Sprawię, że jeden element zajmie dwie kolumny za pomocą grid-column: span 2.

Na następnej lekcji: media queries i RWD – jak strona ma wyglądać inaczej na telefonie, a inaczej na monitorze.