Martin Michálek Martin Michálek  – 2. 8. 2019

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

CSS vlastnosti grid-column a grid-row

Vlastnosti grid-columngrid-row jsou součástí specifikace CSS gridu.

Ve skutečnosti se jedná o zkratky pro vlastnosti grid-column-start, grid-column-endgrid-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

Možnost Ukázka hodnoty
Čísla stop 1 / 2
Jména stop first-line / second-line
Rozsah 1 / span 2
Jedno číslo 3
Záporná čísla -1 / -3
Automatické umístění auto

Čí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í.

grid-column a grid-row ve Firefoxu

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 1grid-column znamená „zabírá jeden sloupec“. Tady je to zbytečné, fungovalo by to i bez tého hodnoty.
  • span 1grid-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-rowgrid-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-rowgrid-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.

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?