Własność CSS grid-area

Własność CSS grid-area to własność zbiorcza układu CSS Grid określająca rozmiar i położenie jednostki siatki w kontenerze siatki lub przypisująca jednostkę siatki do obszaru siatki zdefiniowanego przez własność grid-template-areas.

Własność zbiorcza grid-row obejmuje następujące własności indywidualne:

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

Wartości i składnia

Własność grid-area jako wartość przyjmuje jedną, dwie, trzy lub cztery definicje linii rozdzielone ukośnikami albo identyfikator obszaru zdefiniowany przez własność grid-template-areas. Składnia definicji linii siatki jest opisana na stronach dotyczących poszczególnych własności indywidualnych.

Cztery definicje linii

Jeśli zostaną podane cztery definicje linii siatki, to są stosowane w kolejności: grid-row-start / grid-column-start / grid-row-end / grid-column-end, np.:

grid-area: 1 / 2 / 3 / 4;

Efekt:

Trzy definicje linii

Jeśli zostaną podane trzy definicje linii, to własność grid-column-end zostaje ustawiona na auto, chyba że własności grid-column-start przypisano identyfikator — w takim przypadku własności grid-column-end także jest przypisywany ten identyfikator.

Dwie definicje linii

Jeśli zostaną podane dwie definicje linii, to własności grid-row-end jest przypisywana wartość auto, chyba że własności grid-row-start został przypisany identyfikator — w takim przypadku własności grid-row-end także jest przypisywany ten identyfikator.

Jedna definicja linii

Jeśli zostanie podana jedna definicja linii, to własności grid-column-start zostaje przypisana wartość auto, chyba że własności grid-row-start został przypisany identyfikator — w takim przypadku zostaje on przypisany także wszystkim pozostałym własnościom.

Nazwa obszaru

Jeśli zostanie podany identyfikator obszaru siatki kontenera CSS Grid zdefiniowanego za pomocą własności grid-template-areas, to jednostka siatki zostaje przypisana do tego obszaru.

Podsumowanie