grid-template-areas
Opisuje układ siatki nazwanymi obszarami, niemal jak rysunek w kodzie.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery grid
- JavaScript
element.style.gridTemplateAreas = '"head head" "side main"'
Przykład
#.layout {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-areas:
"header header"
"menu content";
gap: 8px;
}
.layout header { grid-area: header; }
.layout nav { grid-area: menu; }
.layout main { grid-area: content; }<div class="layout stage">
<header class="box" style="grid-area: header">CodeWorlds</header>
<nav class="box" style="grid-area: menu">Menu</nav>
<main class="box" style="grid-area: content">Lekcja 4: Grid</main>
</div>Definicja i zastosowanie
#Właściwość grid-template-areas pozwala narysować układ za pomocą napisów. Każdy napis to jeden wiersz, a słowa w nim to nazwy komórek. Powtórzenie tej samej nazwy w sąsiednich komórkach łączy je w jeden obszar.
Elementom przypisujesz obszary właściwością grid-area, na przykład grid-area: sidebar. Kropka (.) oznacza pustą komórkę. Obszary muszą być prostokątne, kształt litery L nie jest dozwolony.
To najbardziej czytelny sposób opisu całego układu strony. Na telefonach wystarczy w zapytaniu @media podać inny rysunek, a elementy same się przestawią.
Składnia
#grid-template-areas: none | "<nazwa> <nazwa> …" "<nazwa> …" …;Wartości
#"head head" "side main" "foot foot"
Nagłówek i stopka na całą szerokość, pośrodku panel boczny i treść."head side" "main side" "foot side"
Panel boczny zajmuje całą wysokość po prawej stronie."head head" ". main" "foot foot"
z kropką
Kropka zostawia pustą komórkę. Element side nie ma swojego obszaru, więc trafia do wolnej komórki na końcu.
Wartości w praktyce
#"head head" "side main" "foot foot"
.demo { grid-template-areas: "head head" "side main" "foot foot"; }"head side" "main side" "foot side"
.demo { grid-template-areas: "head side" "main side" "foot side"; }"head head" ". main" "foot foot"
.demo { grid-template-areas: "head head" ". main" "foot foot"; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Wyrównuj nazwy w kolumnach spacjami. Kod wygląda wtedy jak mapa układu i łatwo go czytać.
- Każdy wiersz musi mieć tyle samo komórek, a obszary muszą być prostokątne. Inaczej cała deklaracja zostanie zignorowana.
Powiązane hasła
#- grid-areaPrzypisuje element do nazwanego obszaru siatki albo ustawia jego wiersze i kolumny naraz.
- grid-templateSkrót ustawiający wiersze, kolumny i nazwane obszary siatki w jednej deklaracji.
- grid-template-columnsDefiniuje kolumny siatki: ich liczbę i szerokości.
- grid-template-rowsDefiniuje wiersze siatki: ich liczbę i wysokości.
Widzisz błąd albo brakuje przykładu? Napisz do nas.