Vlastnost grid-area

CSS vlastnost grid-area slouží k umísťování položek v definovaném CSS gridu.

Jde o zkratku pro vlastnosti grid-column-start, grid-column-end a grid-row-start, grid-row-end nebo také zkratku pro zkratky grid-column a grid-row, aby to nebylo úplně jednoduché.

Může mít jednu až čtyři hodnoty. Obecně vypadá zápis asi takto:

grid-area:
  <grid-row-start> / <grid-column-start> /  
  <grid-row-end> / <grid-column-end>;

Jedna hodnota

Umístění do už pojmenované oblasti mřížky je snadné. Nejprve si nadefinujeme mřížku a pomocí grid-template-areas pojmenujeme některé z jejích oblastí:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  grid-template-areas:
    "first first"
    ".     second";
}

Pak už do oblastí first a second můžeme umísťovat:

.first {
  grid-area: first;
}

Je to zápis ekvivalentní k tomuto:

.first {
  grid-row-start: first;
  grid-column-start: first;
  grid-row-end: first;
  grid-column-end: first;
}

Další možné zápisy

Automaticky umísťuj do další buňky mřížky:

.item {
  grid-area: auto;
}

Umísti oblast do řádku 2 a sloupce 4:

.item {
  grid-area: 2 / 4;
}

Umísti oblast do třetího sloupce a roztáhni se do všech řádků (od prvního (1) do posledního -1):

.item {
  grid-area: 1 / 3 / -1;
}

Na různé další možnosti hodnot, včetně demíček na CodePenu, se podívejte do příručky ke zkratkám grid-column a grid-row.

Přístupnost: pozor na změnu pořadí

Pomocí vlastnosti grid-area můžete zcela odlišit pořadí prvků v kódu od vizuálního pořadí. Pozor na to, dokument se pak může špatně používat při navigaci z klávesnice nebo při práci přes odečítač obrazovky.