Zaczynamy! Przyjrzymy się filmowi na YouTube (https://www.youtube.com/watch?v=1wgKTOJnVA8) i spróbujemy go zrozumieć w sposób wizualny.
Co to jest CSS Grid?
CSS Grid to system układu strony. Pomyśl o nim jak o arkuszu kalkulacyjnym (Excel). Mamy wiersze i kolumny. Możemy umieszczać elementy w tych komórkach.
Wyobraź sobie szachownicę. To siatka. CSS Grid pozwala tworzyć podobne siatki na stronach internetowych.
Tworzenie kontenera Grid
Najpierw musimy stworzyć kontener. To element, który zawiera naszą siatkę. Ustawiamy jego właściwość display na grid. Wyobraź sobie pudełko. Wewnątrz tego pudełka będziemy układać inne pudełka.
display: grid; informuje przeglądarkę, że ten element będzie kontenerem dla siatki.
Definiowanie wierszy i kolumn
Teraz musimy zdefiniować wiersze i kolumny. Używamy właściwości grid-template-columns i grid-template-rows. Wyobraź sobie rysowanie linii na kartce. Te linie dzielą kartkę na pola.
grid-template-columns: 1fr 1fr 1fr; oznacza, że mamy trzy kolumny o równej szerokości. 1fr to jednostka ułamkowa (fraction). Mówi, że kolumna ma zająć jedną trzecią dostępnej przestrzeni.
grid-template-rows: auto auto; oznacza, że mamy dwa wiersze. auto oznacza, że wysokość wiersza zostanie automatycznie dostosowana do zawartości.
Umieszczanie elementów w siatce
Każdy element wewnątrz kontenera siatki staje się elementem siatki (grid item). Możemy umieścić te elementy w określonych komórkach. Używamy właściwości grid-column-start, grid-column-end, grid-row-start i grid-row-end. Wyobraź sobie GPS. Mówi nam, gdzie dany element ma się znajdować.
Na przykład, grid-column-start: 1; grid-column-end: 3; oznacza, że element ma zaczynać się w pierwszej kolumnie i kończyć na trzeciej. Oznacza to, że zajmuje dwie kolumny.
Możemy używać skróconych właściwości: grid-column: 1 / 3; to to samo co powyżej.
grid-row: 2; umieszcza element w drugim wierszu.
Przykłady wizualne
Wyobraź sobie stronę z nagłówkiem, nawigacją, treścią główną i stopką. Możemy użyć CSS Grid, aby łatwo ułożyć te elementy.
Nagłówek może zajmować cały pierwszy wiersz. Nawigacja może być w lewej kolumnie. Treść główna może zajmować środkową i prawą kolumnę. Stopka może zajmować cały ostatni wiersz.
Inny przykład: galeria zdjęć. Możemy stworzyć siatkę z równej wielkości komórkami i umieścić zdjęcia w tych komórkach. CSS Grid automatycznie dopasuje zdjęcia do siatki.
Dlaczego warto używać CSS Grid?
CSS Grid jest bardzo potężny. Pozwala nam tworzyć skomplikowane układy stron w prosty sposób. Jest bardziej elastyczny niż tradycyjne metody układu oparte na float lub inline-block.
Jest responsywny. Możemy łatwo dostosować układ strony do różnych rozmiarów ekranów. To ważne, bo strony internetowe są oglądane na telefonach, tabletach i komputerach.
Łatwiej kontrolować rozmieszczenie elementów. Możemy precyzyjnie określić, gdzie dany element ma się znajdować.
Porównanie z Flexbox
Flexbox jest inny. Służy do układania elementów w jednym wymiarze (wierszu lub kolumnie). CSS Grid służy do układania elementów w dwóch wymiarach (wierszach i kolumnach). Pomyśl o Flexbox jak o organizowaniu ubrań w szafie (jedna półka). CSS Grid to jak organizowanie mebli w całym domu (wiele pokoi).
Można używać Flexbox wewnątrz elementów siatki (grid items). To daje nam jeszcze większą kontrolę nad układem strony.
Podsumowanie
CSS Grid to potężne narzędzie. Pozwala tworzyć skomplikowane i responsywne układy stron. Pamiętaj o koncepcji siatki: wiersze i kolumny. Ćwicz tworzenie prostych układów. Eksperymentuj z różnymi właściwościami. Im więcej ćwiczysz, tym lepiej zrozumiesz CSS Grid.
Powodzenia w nauce!
