Atrybut CSS grid-template-areas

Definicja i użycie

Atrybut grid-template-areas określa obszary w układzie siatki.

Możesz użyć grid-area Nazywaj elementy siatki, a następnie odnosić się do nich za pomocą atrybutu grid-template-areas.

Każdy obszar jest zdefiniowany przez przecinek. Użyj kropki, aby odwołać się do nieznanych elementów siatki.

Zobacz również:

CSS Tutorial:Projekty siatki CSS

CSS Reference Manual:Atrybut grid-area

CSS Reference Manual:Atrybut grid-template

Przykład

Przykład 1

Aby nazwać projekt "myArea" przechodzący przez dwie kolumny w układzie siatki pięciu kolumn:

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

Spróbuj sam

Przykład 2

Określa dwie linie, w których "item1" przechodzi przez pierwsze dwa kolumny (w układzie siatki pięciu kolumn):

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

Spróbuj sam

Przykład 3

Nazwij wszystkie elementy i utwórz gotowy szablon strony:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Spróbuj sam

Gramatyka CSS

grid-template-areas: none|itemnames;

Wartość atrybutu

Wartość Opis
none Domyślna wartość. Nieznane obszary siatki (grid areas).
itemnames Określa sekwencję, w jakiej każda kolumna i wiersz powinna być wyświetlana.

Szczegóły techniczne

Domyślna wartość: none
Dziedziczenie: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: Moduł układu siatki CSS Grid Level 1
Gramatyka JavaScript: object.style.gridTemplateAreas=". . . myArea myArea"

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