Właściwość CSSGrid
grid-area
Przypisuje element do nazwanego obszaru siatki albo ustawia jego wiersze i kolumny naraz.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy grid i elementy pozycjonowane absolutnie w kontenerze grid
- JavaScript
element.style.gridArea = "sidebar"
Przykład
#CSS
.profile {
display: grid;
grid-template-areas:
"avatar name"
"avatar level";
grid-template-columns: 56px 1fr;
column-gap: 12px;
}
.avatar { grid-area: avatar; }
.name { grid-area: name; }
.level { grid-area: level; }HTML przykładu
<div class="profile stage">
<div class="box avatar" style="grid-area: avatar">AN</div>
<strong class="name" style="grid-area: name">Anna Nowak</strong>
<span class="level" style="grid-area: level">Poziom 7 · 1240 EXP</span>
</div>Podgląd
Definicja i zastosowanie
#Właściwość grid-area ma dwa zastosowania. Najczęściej podaje się jej nazwę obszaru zdefiniowanego w grid-template-areas rodzica, na przykład grid-area: sidebar, a element trafia w to miejsce.
Może też działać jako skrót dla czterech linii: grid-area: 1 / 1 / 3 / 3 oznacza kolejno początek wiersza, początek kolumny, koniec wiersza i koniec kolumny.
Nazwane obszary sprawiają, że kod jest czytelny: od razu widać, gdzie trafia element, bez liczenia linii.
Składnia
#Składnia
grid-area: <nazwa> | <wiersz-start> / <kolumna-start> / <wiersz-koniec> / <kolumna-koniec>;Wartości
#- Automatyczne miejsce w siatce.
<nazwa>
Element trafia do obszaru „a” (2 × 2 komórki).cztery linie
Wiersze 1–2 i kolumny 2–3.
Wartości w praktyce
#auto
Automatyczne miejsce w siatce.
.target { grid-area: auto; }a
Element trafia do obszaru „a” (2 × 2 komórki).
.target { grid-area: a; }1 / 2 / 3 / 4
Wiersze 1–2 i kolumny 2–3.
.target { grid-area: 1 / 2 / 3 / 4; }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
#- Nazwy obszarów w
grid-areapiszesz bez cudzysłowów, wgrid-template-areasw cudzysłowach. - Kolejność czterech wartości to: wiersz start, kolumna start, wiersz koniec, kolumna koniec. Łatwo ją pomylić z kolejnością marginesów.
Powiązane hasła
#- grid-template-areasOpisuje układ siatki nazwanymi obszarami, niemal jak rysunek w kodzie.
- grid-columnOkreśla, w których kolumnach siatki zaczyna się i kończy element.
- grid-rowOkreśla, w których wierszach siatki zaczyna się i kończy element.
- orderZmienia kolejność wyświetlania elementu w kontenerze flex lub grid.
Widzisz błąd albo brakuje przykładu? Napisz do nas.