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.

Vlastnosti grid-column/-row jsou pouhými zkratkami pro snadnější zápis jiných:

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

Používání zkratek je praktičtější, jak sami uvidíte. Takto se uvádějí obecně:

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

Možné hodnoty

Čísla linek

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

CodePen: vrdl.in/muo5r

.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 čitelněji:

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

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

CodePen: vrdl.in/xis4h

Rozsah

Klíčové slovo span slouží k určení rozsahu, jaký v mřížce 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:

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

CodePen: vrdl.in/iks84

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 v tomto případě automaticky umísťují prvky DOMu na jednu buňku mřížky (span 1), takže jim stačí uvést pozici začátku vykreslování.

CodePen: vrdl.in/jso2c

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.

CodePen: vrdl.in/wpdxy

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. Algoritmus automatického umísťování zde vždy začíná a dosud nevykresloval žádné jiné prvky mřížky, které by mohly pozici posunout.

CodePen: vrdl.in/muo5r

Podpora

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