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
a grid-row
jsou součástí specifikace 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 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“, 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
.
Komentujte
Našli jste chybu? Chcete doplnit svůj pohled?
Pište: [email protected]
Sdílení potěší: