Właściwość CSS grid-area

Definicja stylu, przeznaczenie i użycie grid-area

Styl 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:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

Właściwość grid-area może być również stosowana do przypisywania nazwy do elementu siatki. Do nazwanych elementów siatki można następnie odwoływać się przy pomocy właściwości grid-template-area kontenera siatki. Zobacz przykłady poniżej.

Wartości właściwości grid-area

Składnia CSS grid-area

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

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

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

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

Przykładowe zastosowania właściwości grid-area

Przykład 1: ustawia item1, zaczynając od wiersza 2 kolumny 1 i obejmując 2 wiersze i 3 kolumny .item1 { grid-area: 2 / 1 / span 2 / span 3; } Przykład 2: Element 1 otrzymuje nazwę "mojobszar" i dołącza wszystkie pięć kolumn w pole z pięcioma kolumnami: .item1 { grid-area: mojobszar; } .grid-container { display: grid; grid-template-areas: 'mojobszar mojobszar mojobszar mojobszar mojobszar'; }