CSS GRID LAYOUT
GRID i podstawowe pojęcia z nim związane opisałam dokładnie w poprzednim artykule: CSS Grid Layout – wprowadzenie. Tutaj zajmę się już konkretnymi przykładami użycia.
GRID – właściwości grid-container
Aby w ogóle rozpocząć pracę, dodajemy display: grid
do grid-container
. Od tej pory możemy zacząć używać pozostałych właściwości.
UWAGA! column
, float
, clear
, vertical-align
nie zadziałają na grid-container
!!!
Teraz czas na określenie wielkości naszych kolumn i wierszy.
grid-template-columns i grid-template-rows
Wartości rozdzielamy spacją jak na poniższym przykładzie.
.container {
grid-template-columns: 50px 100px auto 100px 50px;
grid-template-rows: auto 50px auto;
}
Uzyskany efekt:
Szerokości nie musimy wpisywać w pikselach. Grid daje nam jeszcze jedną ciekawą opcję. Możemy ustawić, aby wszystkie kolumny i wiersze były równe. Wtedy używamy
1fr 1fr 1fr
. Każda grid-cell
otrzymuje wtedy taką samą szerokość. Jeżeli jedna z nich będzie miała szerokość zdefiniowaną np. na 50px, to pozostała szerokość zostanie podzielona po równo. Przykład poniżej..container {
grid-template-columns: 1fr 50px 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
Możemy także nazwać nasze linie. Pierwsza linia – czyli krawędź
grid-container
to first
następnie przestrzeń na szerokość 40px i kolejna linia o nazwie line2
itd..container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
grid-template-areas
Ta cecha zdefiniuje szablon siatki, nadając poszczególnym jej elementom unikalną nazwę. Dzięki temu, na mniejszych rozdzielczościach będziemy mogli łatwo, za pomocą tych nazw, zmieniać układ i kolejność poszczególnych elementów. Jako wartości wpisujemy nazwy lub kropkę „.” – kropka oznacza pusty grid-cell
.
Na podstawie poniższego przykładu uzyskujemy taki efekt:
.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
grid-column-gap i grid-row-gap
Te cechy pozwalają nam na określenie grubości linii siatki.
.container {
grid-column-gap: 10px;
grid-row-gap: 30px;
}
justify-items
Wszystkie elementy wewnątrz grid-item
ustawią się do lewej lini, do prawej, do środka lub rozciągną się na całą szerokość w zależności od wybranej wartości. Gdy wpiszemy tą cechę do grid-container
wszystkie elementy wewnątrz grid-item
będą miały taką samą wartość.
Możliwe wartości:
start
– elementy ustawią się do lewej strony,end
– do prawej,center
– na środkugrid-area,
stretch
– wypełnią całą szerokość.
align-items
Ta cecha wyrównuje zawartość grid-item
w pionie. Podobnie jak w justify-items
mamy cztery możliwości:
start
– elementy ustawią się do lewej strony,end
– do prawej,center
– na środkugrid-area,
stretch
– wypełnią całą wysokość.
justify-content
Czasami całkowity rozmiar siatki może być mniejszy niż grid-conatiner
. Dzieje się tak wtedy, gdy nie ustawiliśmy szerokości w pikselach, czyli konkretne wartości. Możemy dzięki justify-content
określić wyrównanie tej siatki względem grid-container
.
Możliwe wartości:
start
– wyrównanie do lewej stronygrid-container
end
– do prawejcenter
– do środkastretch
– siatka wypełni całą szerokośćgrid-container
space-around
– odstępy między kolumnami są jednakowe z lewej i z prawej stronyspace-between
– lewa kolumna jest przy lewej krawędzi, prawa przy prawej a środkowa w centrumspace-evenly
– dodaje równą ilość miejsca między elementami siatki włączając krawędzie
align-content
Ta cecha wyrównuje w pionie siatkę, która jest mniejsza niż grid-container
, w którym się znajduje. Możliwe wartości są tanie same jak w przypadku justify-content
:
start
– wyrównanie do lewej stronygrid-container
end
– do prawejcenter
– do środkastretch
– siatka wypełni całą szerokośćgrid-container
space-around
– odstępy między kolumnami są jednakowe z lewej i z prawej stronyspace-between
– lewa kolumna jest przy lewej krawędzi, prawa przy prawej a środkowa w centrumspace-evenly
– dodaje równą ilość miejsca między elementami siatki włączając krawędzie
Podsumowanie
Właściwości grid-container
omówione powyżej to podstawa, dzięki której można już wiele zdziałać. Oprócz tego autorzy przewidzieli jeszcze ułatwienia w postaci skrótów. Jedna cecha przybiera wtedy wiele wartości co znacznie skraca pisanie. W kolejnym artykule omawiam właściwości grid-item
: Właściwości grid-item.
A jak wygląda sprawa responsive ? Czy klasy same w sobie dostosują się do mniejszej szerokości – tak jak jest to w BS4, czy raczej trzeba do każdej szerokości pisać osobne zapytanie o media ?
Jaka jest maksymalna liczba kolumn w tej siatce ?
Podsyłam fajny przykład użycia grida do stworzenia układu okresowego pierwiastków: https://codepen.io/dudleystorey/pen/rmWMXY/
Kolumn jest całkiem sporo 🙂 Media queries także zostały użyte, ale jest zdecydowanie mniej pisania.