CSS · lekcja 13

Układ w HTML5: CSS Grid

Na poprzedniej lekcji nazwaliście kawałki strony znacznikami <header>, <nav>, <main>, <aside>, <footer> - ale strona nadal wygląda jak jedna kolumna pod drugą, bo to normalny przepływ blokowy. display: grid rozkłada te same znaczniki po siatce wierszy i kolumn.

display: grid i grid-template-columns - jak podzielić kontener na kolumny, jednostka fr
gap - odstępy między kratkami siatki
grid-template-areas i grid-area - nazwane pola siatki dla header/nav/main/aside/footer

Rozgrzewka · 3 minuty

Trzy pytania z poprzedniej lekcji

Ile razy może wystąpić <main> na jednej stronie i gdzie ma się znajdować?
Czym różni się <article> od <section>?
Dlaczego zamiana <div> na <header>/<nav>/<main>/<footer> nie zmienia wyglądu strony?

Część 1 · kolumny i jednostka fr

Kontener na kolumny: grid-template-columns

display: grid zamienia bezpośrednie dzieci kontenera w elementy siatki (grid items) - podobnie jak display: flex z lekcji 10. Różnica: sama siatka na start ma jedną kolumnę, więc nic się nie zmienia, dopóki nie dodacie kolumn właściwością grid-template-columns. Zamiast sztywnych pikseli lepiej użyć jednostki fr (fraction, „ułamek”) - to fragment wolnego miejsca w kontenerze. grid-template-columns: 1fr 3fr daje dwie kolumny w proporcji 1 do 3, niezależnie od tego, jak szerokie jest okno.

Ciekawostka z Wikipedii: pierwszy pełny szkic CSS Grid napisali w 2011 roku inżynierowie Microsoftu (Phil Cupp, Markus Mielke i Alex Mogilevsky) i trafił od razu do przeglądarki Internet Explorer 10, ukryty pod przedrostkiem -ms-. Dzisiejszą, dopracowaną składnię z tej lekcji grupa robocza CSS opisała dopiero kilka lat później.

MDN: „the display: grid property transforms all the direct children of the container into grid items” · „Declaring display: grid gives you a one column grid, so your items will continue to display one below the other as they do in normal flow” · „The fr unit represents one fraction of the available space in the grid container to flexibly size grid rows and columns” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Grids · ciekawostka: en.wikipedia.org/wiki/CSS_grid_layout

Część 2 · odstępy między kratkami

Odstępy w siatce: gap

Bez odstępu kratki siatki stykają się krawędziami. column-gap ustawia odstęp między kolumnami, row-gap między wierszami, a gap to skrót na oba naraz. Odstępy podaje się w dowolnej jednostce długości albo w procentach - nie w fr.

MDN: „To create gaps between tracks, we use the properties: column-gap for gaps between columns, row-gap for gaps between rows, gap as a shorthand for both” · „These gaps can be any length unit or percentage, but not an fr unit” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Grids

Część 3 · nazwane pola: grid-template-areas

Nazwij pola siatki: grid-template-areas

Zamiast liczyć numery kolumn i wierszy, można nazwać pola siatki wprost - tym samym słowem, którego użyliście w znacznikach sekcji na poprzedniej lekcji. Każdy wiersz w cudzysłowie to jeden rząd siatki, a powtórzenie nazwy scala sąsiednie kratki w jedno pole.

Reguła	Co to znaczy
Każda kratka wypełniona	Nie można zostawić kratki bez nazwy - każda musi coś dostać
Powtórzenie nazwy	Ta sama nazwa w sąsiednich kratkach scala je w jedno, większe pole
Kropka `.`	Zostawia kratkę pustą (bez nazwy pola)
Pole musi być prostokątem	Nie można ułożyć nazwy w kształcie litery L
Nazwa raz	Ta sama nazwa nie może się pojawić w dwóch osobnych, niesąsiadujących miejscach

MDN: „An alternative way to arrange items on your grid is to use the grid-template-areas property and give the various elements of your design a name” · „You need to have every cell of the grid filled. To span across two cells, repeat the name. To leave a cell empty, use a . (period). Areas must be rectangular, for example you can't have an L-shaped area. Areas can't be repeated in different locations” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Grids

Część 3 · przypisanie znaczników: grid-area

Znacznik trafia do pola: grid-area

Kontener dostaje grid-template-areas z pięcioma nazwami znanymi z poprzedniej lekcji. Każdy znacznik dostaje grid-area z pasującą nazwą, żeby przeglądarka wiedziała, do którego pola go wstawić.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas:
    "header header header"
    "nav    main    aside"
    "footer footer footer";
  gap: 20px;
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

MDN: „We are then using the grid-area property to define where elements are placed in the grid-template-areas” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Grids

Część 3 · efekt na stronie

Ta sama strona, teraz siatką

To ta sama makieta co na poprzedniej lekcji - header na całą szerokość u góry, nav/main/aside obok siebie w środkowym rzędzie, footer na całą szerokość na dole. Różnica: wcześniej znaczniki tylko się nazywały, teraz siatka faktycznie układa je w te pola, z odstępem gap między kratkami.

developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Grids

CSS Grid · moje pytanie

Sprawdźmy zrozumienie: grid-template-areas

Który zapis grid-template-areas ułoży header na całą szerokość u góry, nav/main/aside obok siebie w jednym rzędzie poniżej i footer na całą szerokość na dole - bez łamania żadnej reguły z tej lekcji?

A.

"header header header"
"nav    main    aside"
"footer footer footer"

B.

"header nav main"
"aside footer footer"

C.

"header header nav"
"nav    main    aside"
"footer footer footer"

D.

"header header header"
"nav    main    aside"
"footer footer .    "

MDN: „Unless the values form a rectangle the declaration is invalid” · developer.mozilla.org/docs/Web/CSS/grid-template-areas

Ćwiczenie · przy komputerze · 25 minut

Ćwiczenie: układ siatką CSS Grid

Otwórz style.css i index.html (oraz pozostałe podstrony) swojej witryny.
Do głównego kontenera strony (albo wprost do body) dodaj display: grid, grid-template-columns (np. 1fr 3fr 1fr) i grid-template-areas z pięcioma polami: header, nav, main, aside, footer - tak jak przy znacznikach sekcji.
Znacznikom header, nav, main, aside, footer przypisz grid-area z pasującą nazwą. Dodaj gap, żeby pola nie stykały się krawędziami.
Zapisz, F5, sprawdź w przeglądarce - strona ma teraz układ kolumnowy zamiast jednej kolumny pod drugą.

Pamiętajcie: liczba nazw w każdym wierszu grid-template-areas musi być taka sama (kropka . zostawia pustą kratkę) - inaczej przeglądarka zignoruje całą właściwość.

Pytania kontrolne

Trzy pytania na koniec

Co się stanie, gdy w grid-template-areas powtórzycie tę samą nazwę w dwóch sąsiednich kratkach?
Czym różni się jednostka fr od pikseli przy zmianie szerokości okna?
Dlaczego kropka . w grid-template-areas nie jest nazwą pola?

To tyle: cały kurs CSS zamknięty, od pierwszej reguły po układ całej strony siatką.

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
`grid-template-areas` z nazwami header/nav/main/aside/footer	Ten sam mechanizm w panelach administracyjnych i sklepach internetowych - nazwane pola czytelne w kodzie bez liczenia numerów kolumn i wierszy	nadal w użyciu
`float` do układania całej strony kolumnami (lekcja 10)	CSS Grid razem z flexboksem zastąpił `float` w układaniu całych stron - `float` wrócił do swojej pierwotnej roli: obrazek otoczony tekstem	zastąpione
Stałe piksele w `grid-template-columns`	W realnych witrynach kolumny częściej mają jednostkę `fr` albo funkcję `minmax()`, żeby siatka reagowała na szerokość ekranu bez dodatkowych reguł (poza zakresem tej lekcji)	nadal w użyciu

MDN: „Using floats [for whole-page layouts] should be regarded as a legacy technique” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Floats