CSS Grid: Władca Siatek

O ile Flexbox jest rewelacyjny w układaniu rzeczy w jednym kierunku (w rzędzie albo w kolumnie), o tyle CSS Grid powstał, by zdominować oba wymiary naraz. Jeśli arkusz egzaminacyjny wymaga np. szachownicy, kafelków lub układu w formie kalendarza – Grid jest jedynym słusznym rozwiązaniem.

Włączanie Grida

Podobnie jak przy Flexboxie, Grid aplikujemy na rodzica (kontener).

.galeria {
    display: grid;
}

Samo włączenie nic nie zrobi (elementy ułożą się po staremu). Musimy zdefiniować szablon kolumn i wierszy!

Rzędy i Kolumny

Wyobraź sobie Excela. Ustalamy, ile komórek ma nasza siatka:

.galeria {
    display: grid;
    /* 3 kolumny: jedna szeroka na 100px, druga na 200px, a trzecia automatyczna */
    grid-template-columns: 100px 200px auto; 
    
    /* 2 rzędy po 150px wysokości każdy */
    grid-template-rows: 150px 150px; 
}

Magiczna jednostka fr (fraction): W Gridzie powstała nowa jednostka oznaczająca "jedną część ułamkową". Jeśli zrobisz grid-template-columns: 1fr 1fr 1fr; to Grid idealnie podzieli kontener na 3 równe kolumny, całkowicie ignorując sztywne piksele. Zamiast wpisywać 1fr wiele razy, używamy funkcji repeat(): grid-template-columns: repeat(3, 1fr);.

Rozstaw (Gap)

Kiedyś żeby oddzielić kafelki w galerii trzeba było kombinować z margin. W Gridzie mamy po prostu gap!

.galeria {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* 20px wolnego miejsca pomiędzy kafelkami we wszystkich kierunkach */
}

Obszary (Grid Areas)

Bardzo popularne, choć lekko zaawansowane. Grid pozwala "nazwać" obszary i ułożyć je z klocków tekstowych (np. przy projektowaniu całego układu strony):

.kontener-strony {
    display: grid;
    grid-template-areas:
        "naglowek naglowek naglowek"
        "menu tresc panel"
        "stopka stopka stopka";
}

Następnie w stylach danego div-a po prostu podajesz, do jakiej strefy należy:

header { grid-area: naglowek; }
main { grid-area: tresc; }

Rozwiązuje to kompletnie sprawę skomplikowanych layoutów na INF.03, choć warto przyznać, że prostsze arkusze da się rozwiązać samym Flexboxem. Niemniej Grid to narzędzie kompletne!