Vlastnosti grid-column a grid-row

V textu se zaměříme na vlastnosti grid-column a grid-row, které slouží k umísťování položek v definované mřížce.

Ve skutečnosti se jedná o zkratky pro vlastnosti grid-column-start, grid-column-end a grid-row-start, grid-row-end.

Mě však připadá praktičtější používání zkratek, takže se zaměříme na ně:

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

Možné hodnoty

Čísla stop

Tady je to jednoduché. Potřebujete dvě hodnoty – pro začátek a konec pozice v mřížce.

Řekněme, že máme tuto mřížku o 3 × 3 buňkách:

.container {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2rem 2rem 2rem;
}

Pokud bychom položku chtěli umístit do druhého sloupce a přes druhý a třetí řádek, zapíšeme to následovně:

.item {
  grid-column: 2 / 3;
  grid-row: 2 / 4;  
}

Je to totéž, jako bychom napsali:

.item {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

Všimněte si, že řádky končíme na čísle 4, i když je máme jen tři. Je to dobrá připomínka toho, že se zde neodkazujeme na čísla řádků či sloupců, ale na čísla linek, které grid definují.

Jména stop

Podobná situace je u pojmenovaných linek. Máme stejný příklad jako výše uvedeným, jen s pojmenovanými linkami:

.container {
  display: grid;
  gap: 10px;
  grid-template-columns:
    [first-col] 1fr [second-col] 1fr [third-col] 1fr [end];
  grid-template-rows:
    [first-row] 2rem [second-row] 2rem [third-row] 2rem [end];
}

Umísťujeme pak elegantně a o fous více čitelně:

.item {
  grid-column: second-col / third-col;
  grid-row: second-row / end;
}  

Výsledek však pochopitelně bude stejný.

Rozsah

Klíčové slovo span slouží ke specifikování rozsahu, který v mřížce daná buňka zabírá.

Podívejme se teď na tentýž příklad jako v první ukázce, jen si jeho pozici definujme pomocí rozsahu:

.item {
  grid-column: 2 / span 1;
  grid-row: 2 / span 2;
}

Vysvětlíme:

• span 1 u grid-column znamená „zabírá jeden sloupec“. Tady je to zbytečné, fungovalo by to i bez tého hodnoty.
• span 1 u grid-row už je zajímavější. Říkáme tím, že má zabrat dva řádky buňek mřížky. Může to tedy být čitelnější než zápis grid-row: 2 / 4.

Jedno číslo

Občas je možné vidět zápis grid-row a grid-column jen s jedním číslem:

.item {
  grid-column: 2;
}  

Funguje to tak, jak asi očekáváte. Prohlížeče automaticky umísťují na jednu buňku mřížky (span 1), takže jim stačí uvést pozici začátku vykreslování.

Záporná čísla

Záporná čísla ve vlastnostech grid-row a grid-column počítají umístění zprava nebo zezdola. Pokud bychom tedy chtěli stejnou svislou pozici položky jako v našem příkladu, jen definovanou zápornými čísly, zapsali bychom ji takto:

.item {
  grid-column: 2 / 3;
  grid-row: -1 / -3;
}

Kódem grid-row: -1 / -3 říkáme: Chci umístění od první linky mřížky zezdola až po třetí linku mřížky v tomtéž směru.

Automatické umístění

Hodnota auto vypíná ruční umísťování a nechá pracovat algoritmus „autoplacementu“, postupného automatického umístění do existujících buněk rozvržení.

Vezměme stejný příklad:

.item {
  grid-column: 2 / 3;
  grid-row: auto;
}

Prvek bude dále umístění do druhého sloupce, ale v tomto případě do prvního řádku. Algoritmnus automatického umísťování zde vždy začíná a dosud nevykresloval žádné jiné prvky mřížky, které by pozici mohly posunout.

Podpora

Moderní prohlížeče jsou s těmito vlastnostmi úplně v pohodě. Horší je to samozřejmě v MSIE, ale to navadí, protože podobné vlastnosti tam existují. Autoprefixer nám pomůže a např. grid-row se přeloží do -ms-grid-row.