Atrybut CSS grid-template

Definicja i użycie

Atrybut grid-template jest skróconą wersją następujących atrybutów:

Patrz również:

Kurs CSS:Projekty siatki CSS

Podręcznik CSS:Atrybut grid-area

Podręcznik CSS:Atrybut grid-template-rows

Podręcznik CSS:Atrybut grid-template-columns

Podręcznik CSS:Atrybut grid-template-areas

Przykład

Przykład 1

Tworzenie trójkomponentowego układu siatki o wysokości 150 pikseli w pierwszym wierszu:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Spróbuj sam

Przykład 2

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

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

Spróbuj sam

Przykład 3

Nazwij wszystkie elementy i stwórz gotowy 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 {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Spróbuj sam

CSS syntax

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Wartość atrybutu
Wartość Opis
none Domyślna wartość. Nie określa rozmiaru kolumn ani wierszy.
grid-template-rows / grid-template-columns Określa rozmiary kolumn i wierszy.
grid-template-areas Określa użycie układu siatki z nazwanymi elementami.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: none none none
Inheredowanie: nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridTemplate = "250px / auto auto"

Wspierane 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