Atrybut grid-area w CSS

Definicja i użycie

Atrybut grid-area wymiarów elementu siatki oraz jego pozycji w układzie siatki, jest skrótem dla następujących atrybutów:

Atrybut grid-area może również być używany do przypisywania nazw elementom siatki. Następnie, można użyć kontenera siatki grid-template-areas Wskazówki dotyczące nazewnictwa elementów siatki. Zobacz poniższe przykłady.

Zobacz również:

CSS Tutorium:Układ siatek CSS

Przykład

Przykład 1

Ustawia "item1" zaczynający się w wierszu 2, kolumnie 1 i rozciągający się na dwa wiersze i trzy kolumny:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
{}

Spróbuj sam

Wskazówka:Więcej przykładów znajduje się na dole strony.

Gramatyka CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Wartość atrybutu

Wartość Opis
grid-row-start Określa, od której wiersza zaczyna się wyświetlanie elementu.
grid-column-start Określa, od którego kolumny zaczyna się wyświetlanie elementu.
grid-row-end Określa, w której linii wiersza projekt kończy się wyświetlanie, lub na ile wierszy się rozciąga.
grid-column-end Określa, w którym linii kolumny projekt kończy się wyświetlanie, lub na ile kolumn się rozciąga.
itemname Określa projekt elementu siatki.

Szczegóły techniczne

Domyślna wartość: auto / auto / auto / auto
Inherytowanie: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty związane z animacją.
Wersja: Moduł układu siatki CSS Grid Layout Level 1
Gramatyka JavaScript: object.style.gridArea="1 / 2 / span 2 / span 3"

Więcej przykładów

Przykład 2

Item1 jest nazwany 'myArea' i przekracza 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';
{}

Spróbuj sam

Przykład 3

Spróbuj 'myArea' przekraczać dwie kolumny w układzie siatki z pięcioma kolumnami (kropki oznaczają bezimiennych elementów):

.item1 {
  grid-area: myArea;
{}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
{}

Spróbuj sam

Przykład 4

Spróbuj 'item1' przekraczać dwie kolumny i dwie wiersze:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
{}

Spróbuj sam

Przykład 5

Nazwij wszystkie elementy i przygotuj szablon strony gotowej do użycia:

.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';
{}

Spróbuj sam

Obsługa przeglądarki

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44