CSS grid-area Property
Przykład
Ustaw element „item1” rozpoczynający się w wierszu 2, kolumna 1 i obejmujący 2 wiersze i 3 kolumny:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość grid-area
określa rozmiar i położenie elementu siatki w układzie siatki i jest skróconą właściwością dla następujących właściwości:
Właściwość grid-area
może być również użyta do przypisania nazwy do elementu siatki. Nazwane elementy siatki można następnie odwoływać się do właściwości
grid-template-areas kontenera siatki. Zobacz przykłady poniżej.
Domyślna wartość: | samochód / samochód / samochód / samochód |
---|---|
Dziedziczny: | nie |
Animowalny: | tak. Przeczytaj o animacji |
Wersja: | Moduł układu siatki CSS, poziom 1 |
Składnia JavaScript: | obiekt .style.gridArea="1 / 2 / rozpiętość 2 / rozpiętość 3" |
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
Składnia CSS
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
Wartości nieruchomości
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-column-start | Specifies on which column to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
itemname | Specifies a name for the grid item |
Więcej przykładów
Przykład
Element 1 otrzymuje nazwę „myArea” i obejmuje wszystkie pięć kolumn w układzie siatki z pięcioma kolumnami:
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Przykład
Niech „myArea” obejmuje dwie kolumny w układzie siatki z pięcioma kolumnami (znaki kropek reprezentują elementy bez nazwy):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
Przykład
Spraw, aby „item1” obejmował dwie kolumny i dwa wiersze:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
Przykład
Nazwij wszystkie elementy i stwórz gotowy do użycia szablon strony internetowej:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
Powiązane strony
Samouczek CSS: układ siatki CSS