Položka přes více buněk

Mainská mývalí kočka patří k největším kočičím plemenům, tak jí dáme i větší kartu: dva sloupce širokou a dva řádky vysokou.

Položka může zabírat víc buněk. Vlastností grid-column určíme, které sloupce zabírá, a vlastností grid-row, které řádky. Nejjednodušší je použít slovo span (rozpětí) a číslo:

.velka {
	grid-column: span 2;
}

Položka začne tam, kde by byla i tak, ale bude široká dva sloupce. Položky za ní se posunou, aby jí udělaly místo. Když se položka na konec řádku nevejde, přesune se na další řádek.

Můžeme také přesně určit, kde položka začíná a kde končí, a to pomocí čísel čar mřížky. Čáry se číslují od 1: mřížka se třemi sloupci má čtyři svislé čáry, od levého kraje po pravý (viz obrázek). Hodnotou jsou pak dvě čísla oddělená lomítkem: čára, kde položka začíná, a čára, kde končí.

.velka {
	grid-column: 1 / 3;
}

Tato položka vede od čáry 1 k čáře 3, takže zabírá první a druhý sloupec. Zápis grid-column: 1 / -1 roztáhne položku přes celou šířku mřížky: záporná čísla počítají čáry od konce, takže -1 je poslední čára.

Vlastnost grid-row funguje stejně, jen pro řádky.