grid-template-areas — CSS

Nazwane obszary Grid pozwalają zapisać układ czytelniej niż samymi numerami kolumn.

Cel lekcji

Poznać zagadnienie „grid-template-areas”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Szczególnie dobrze sprawdzają się w widokach z nagłówkiem, treścią i bocznym panelem.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

.page { display: grid; grid-template-areas: "head head" "side main"; }
.header { grid-area: head; }
.sidebar { grid-area: side; }
.main { grid-area: main; }

Przeczytaj kod linijka po linijce

.page { display: grid; grid-template-areas: "head head" "side main"; }Ustawiamy sposób rozmieszczania elementów.
.header { grid-area: head; }Przypisujemy wartość wybranej właściwości CSS.
.sidebar { grid-area: side; }Przypisujemy wartość wybranej właściwości CSS.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Nagłówek obejmuje obie kolumny, poniżej jest panel i treść.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Dodaj obszar footer na całą szerokość.