CSS GRID Layout – wprowadzenie
Grid to sposób tworzenia (budowania, składania) stron internetowych – drugie obok Flexboxa potężne narzędzie, ułatwiające pracę. CSS Grid Layout to układ dwuwymiarowy, tak jak tabele obsługuje kolumny i wiersze. W dużym kontenerze (Grid container) umieszcza się elementy potomne (Grid items) – po dodaniu odpowiednich cech w css, można stworzyć zaawansowany układ, a po dodaniu odpowiednich @media układ stanie się responsywny.
Flexbox stworzony został do prostszych układów jednowymiarowych – przy zaawansowanych witrynach i przede wszystkim wielowymiarowych zaleca się używanie CSS Grid Layout. Dzięki niemu możemy zapomnieć o: inline, block, flat, left, right, position, absolute itp. i w sposób intuicyjny i dużo szybszy niż klasyczny – tworzyć layout stron internetowych.
Zachęcam do obejrzenia filmu „Morten Rand-Hendriksen: CSS Grid Changes Everything” – bardzo dobre wprowadzenie do tematu! 🙂
GRID – podstawy
Grid-container
Grid-container to element główny, w którym znajdują się elementy potomne. Jemu przypisujemy cechę display: grid i od tego zaczynamy całą pracę. W kodzie poniżej grid-container to div class="container"
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
</div>Grid-item
grid-item to elementy potomne grid-containera. Znajdują się bezpośrednio pod nim, w poniższym przykładzie są to wszystkie divy o klasie item. Natomiast h2 to już nie jest grid-item.
<div class="container">
<div class="item item1">
<h2> TITLE </h2>
</div>
<div class="item item2"></div>
<div class="item item3"></div>
</div>Grid-line
grid-line to linia siatki. Jak już wspomniałam będziemy tworzyć swoistą tabelę. Tabela będzie podzielona liniami poziomymi i pionowymi. Każda z tych linii to grid-line.
Grid-track
grid-track to przestrzeń między dwiema liniami siatki – zarówno w pionie jak i w poziomie. Mówiąc prościej: kolumny lub wiersze.
Grid-cell
Jest to przestrzeń między dwiema liniami pionowymi i dwiema poziomymi, czyli komórka.
Grid-area
Na koniec grid-area czyli obszar składający się z dowolnej liczby grid-cell. Obszar leży pomiędzy czterema liniami siatki.
Podsumowanie
Z takimi podstawami można już spokojnie zabrać się za projektowanie layoutu za pomocą CSS Grid. W kolejnym wpisie prezentuję po kolei właściwości grid-containera: Właściwości grid-container.