V textu se zaměříme na vlastnosti grid-column
a grid-row
, které slouží k umísťování položek v definovaném CSS gridu.
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
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 do 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
ugrid-column
znamená „zabírá jeden sloupec“. Tady je to zbytečné, fungovalo by to i bez tého hodnoty.span 1
ugrid-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ápisgrid-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“.
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.
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?