Właściwość CSS grid-template-areas

Definicja stylu, przeznaczenie i użyciegrid-template-areas

Styl grid-template-area definiuje obszary w układzie siatki. Można nazwać elementy siatki przy pomocy właściwości grid-area, a następnie odwołać się do nazwy we właściwości grid-template-area.

Każdy obszar jest określony apostrofami. Użyj kropki, aby odnieść się do elementu siatki bez nazwy.

Wartości właściwości grid-template-areas

Składnia CSS grid-template-areas

grid-template-areas: none | itemnames;

Wsparcie przeglądarek dla właściwości grid-template-areas

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość
grid-template-areas	57.0	16.0	52.0	10.0	44.0

Przykładowe zastosowania z właściwością grid-template-areas

Kliknij wartości właściwości poniżej, aby zobaczyć wynik.

#myDIV {
  display: grid;
  grid-template-areas: none;
}
.item1 {
  grid-area: myArea;
}