Własność CSS grid-template-areas

Własność CSS grid-template-areas definiuje nazwane obszary siatki, do których można przypisać wybrane jednostki siatki. Jej składnia jest tak skonstruowana, że za jej pomocą można stworzyć wizualną reprezentację tworzonego układu elementów w kontenerze CSS Grid.

Wartości i składnia

Własność grid-template-areas przyjmuje następujące wartości:

Słowo kluczowe none

Oznacza, że własność ta nie tworzy żadnych jawnych obszarów siatki.

Listy identyfikatorów komórek w cudzysłowach

Każda lista reprezentuje jeden wiersz, a każdy jej identyfikator reprezentuje jedną komórkę siatki. Dodatkowo można używać kropki do oznaczania pustych komórek.

Każda lista powinna zawierać taką samą liczbę elementów (nazwanych i pustych komórek łącznie). Jeśli listy te ułoży się jedna pod drugą, można otrzymać wizualną reprezentację tworzonego układu, np.:

grid-template-areas: "nagł nagł  nagł   nagł   nagł   nagł  nagł  nagł"
                     "lewa lewa środek środek środek środek prawa prawa"
                     "stop stop  stop   stop   stop   stop   stop  stop";

Ta deklaracja tworzy trzy wiersze. Pierwszy, nagłówek, ma jedną kolumnę zajmującą całą szerokość kontenera. Drugi ma trzy kolumny: lewą, środkową i prawą. Kolumny boczne zajmują po 2/8 szerokości wiersza, a środkowa — pozostałe 4/8. Trzeci wiersz, tak jak pierwszy, ma jedną kolumnę, reprezentującą stopkę.

Własność grid-template-areas tworzy tylko siatkę, na której można rozmieścić elementy (jednostki siatki) za odpowiednich własności CSS Grid. Na przykład za pomocą własności grid-area można przypisać wybrany element do wybranego obszaru siatki.

Podsumowanie