KATEGORIA:

Właściwości grid-container

grid-container

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:
grid columns
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;
}

fraction grid
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;
}

grid-column-gap

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 środku grid-area,
  • stretch – wypełnią całą szerokość.

grid-justify

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 środku grid-area,
  • stretch – wypełnią całą wysokość.

align-items grid

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 strony grid-container
  • end – do prawej
  • center – do środka
  • stretch – siatka wypełni całą szerokość grid-container
  • space-around – odstępy między kolumnami są jednakowe z lewej i z prawej strony
  • space-between – lewa kolumna jest przy lewej krawędzi, prawa przy prawej a środkowa w centrum
  • space-evenly – dodaje równą ilość miejsca między elementami siatki włączając krawędzie

justify-content

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 strony grid-container
  • end – do prawej
  • center – do środka
  • stretch – siatka wypełni całą szerokość grid-container
  • space-around – odstępy między kolumnami są jednakowe z lewej i z prawej strony
  • space-between – lewa kolumna jest przy lewej krawędzi, prawa przy prawej a środkowa w centrum
  • space-evenly – dodaje równą ilość miejsca między elementami siatki włączając krawędzie

align-content

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-itemWłaściwości grid-item.

KOMENTARZE

  1. 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 ?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *