CSS Grid – Co powinieneś o nim wiedzieć?

CSS Grid to nowy system tworzenia layoutu w CSS. W marcu 2017 stał się domyślnie dostępny w Chrome 57 i w Firefox 52. Dostępne jest również częściowe wsparcie w IE10, IE11, IE Mobile oraz Microsoft Edge z prefixem -ms. Niebawem display grid będzie działać w następnej wersji Safari 10.1 oraz Operze 44. Z takim wsparciem można CSS Grid zacząć używać.

CSS Grid a Flexbox

System CSS Grid jest dwuwymiarowy co oznacza, że możemy w nim sterować zarówno kolumnami jak i wierszami.
Nawet system flexbox, który w porównaniu z floatami jest bardzo wygodny, jest tylko jednowymiarowy. Mimo, że flexbox ma już kilka lat, to jeszcze niezawsze jest domyślnym wyborem. Może CSS Grid szybko zastąpi flexbox? Poznaj nowy system layoutów, aby przekonać się samemu.

CSS Grid – szczegóły

Style CSS w Grid Layout dzielą się na style, które nadajemy do elementu będącego rodzicem/kontenerem (ang. Grid Container) oraz na elementy będące dziećmi rodzica (ang. Grid Items).

CSS Grid – style kontenera

Display: Grid

To dobrze znany wszystkim Fronted Developerom styl, aktywujący w przeglądarce żądany przez frontendowca sposób wyświetlania danego elementu. Z nowym layoutem doszły jego nowe wartości:

• grid – aktywuje blokowy grid
• inline-grid – aktywuje inline grid
• subgrid – może być nadawany na grid item (sytuacja kiedy masz grid w gridzie), aktywuje wtedy dziedziczenie ustawień grida. Styl przeniesiony do
  grid: subgrid;

.container {
  display: grid;
}

display: block;

grid-template-columns, grid-template-rows

Te dwa style definiują siatkę grida. grid-template-columns określa kolumny i nazwy przerw między nimi, a grid-template-rows wiersze i nazwy przerw między nimi. Jeśli nazw przerw się nie poda, to zostanie użyte domyślne numerowanie.

Przyjmowane wartości:

• <track-size> – liczba, procenty albo ilość pozostałego wolnego miejsca w gridzie w jednostkach fr
• <line-name> – nazwa przerwy

Przykłady:

.container {
  display: grid;
  grid-template-columns: 10% 15% auto 15% 10%;
  grid-template-rows: 200px 50px auto;
}

.container {
  grid-template-columns: [first] 40px [left] 50px [sidebar-left] auto [sidebar-right] 50px [right] 40px [last];
  grid-template-rows: [header-start] 25% [header-end breadcrumbs-start] 100px [breadcrumbs-end] auto repeat(2, 50px [footer-row]);
}

[header-end breadcrumbs-start] – nazwy mogą być podwójne

repeat(2, 50px [footer-row]) – jeśli chcesz x razy taką samą kolumnę/wiersz, możesz użyć składni repeat

display: grid;
grid-gap: 10px;
grid-template-columns: 10% auto;

grid-template-areas

Dzięki temu stylowi możesz nazwać poszczególne columny i wiersze swojego grida. Następnie używając stylu grid-area na elemencie będącym dzieckiem grid (grid-item) wskazać miejsce jego wyświetlania.

Przyjmowane wartości:

• <grid-area-name> – twoja nazwa danego miejsca w gridzie
• . – kropka, określa pustą komórkę grida
• none – wyłącza definicję pól grid-area

Przykład:

#header {
  grid-area: header;
}
main {
  grid-area: main;
}
#footer {
  grid-area: footer;
}
.container {
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto;
  grid-template-areas:
  "header header header"
  "sidebarleft main sidebarright"
  "footer footer footer";
}

display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: 
          "header header header"
          "sidebar main main"
          "footer footer footer";

grid-column-gap, grid-row-gap

Style określają wielkość przerwy między kolumnami/wierszami (ang. gutter).

Przykład:

.container {
  grid-column-gap: 10px;
  grid-row-gap: 20px;
}

display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;

CSS Display Grid – style grid itemów

grid-column-start, grid-column-end, grid-row-start, grid-row-end

Są to podstawowe style, które pozwolą wyświetlić grid itemy w gridzie. Dzięki nim określisz, które kolumny i wiersze ma zajmować. Wartości określają przestrzenie pomiędzy kolumnami/wierszami.

• <line> – numer lub nazwa przestrzeni międzykolumnowej lub międzywierszowej
• span <number> – element będzie się rozszerzał do podanego numeru
• span <number> – element będzie się rozszerzał do podanej nazwy
• auto – automatyczna przestrzeń

Przykład:

grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;

Jeśli nie podasz grid-column-end lub grid-row-end wtedy domyślnie element będzie się rozszerzał na jedną komórkę.

Elementy mogą się przesłaniać, do kontroli kolejności warstw możesz użyć z-index.

grid-area

Jeśli określiłeś grid-template-areas, to możesz użyć grid-area zamiast grid-column-x i grid-row-x, albo możesz zbiorczo podać kolumny i wiersze w tym stylu.

Wartości:

• <name> – nazwa grid area
• <row-start> / <column-start> / <row-end> / <column-end> – numery lub nazwy przerw (gutterów)

Przykłady:

#header {
  grid-area: header;
}

#header {
  grid-area: 1 / before-col4 / after-footer / after-col5
}

justify-self

Wyrównuje grid-item w poziomie.

Wartości: start, end, center, stretch (domyślna wartość)

align-self

Wyrównuje grid-item w pionie.

Wartości: start, end, center, stretch (domyślna wartość)

W obu stylach, justify-self oraz align-self, inna wartość niż stretch spowoduje że tło będzie tak duże jak zawartość grid-itema.

Przykładowy CSS Grid Layout

Podsumowanie

CSS Grid layout jest tym na co czekało wielu Frontend Developerów. Część problemów, które były obchodzone JavaScriptem rozwiązuje już system flexbox. Jednak CSS Grid daje jeszcze większą swobodę w definiowaniu layoutu strony internetowej. W swoich prywatnych projektach już możesz zacząć go używać, a niebawem i w pracy etatowej wielu frontendowców zacznie wykorzystywać zalety nowych możliwości. Dołącz do nich!