Grid

Grid

Ucelený layout je základem přehledného a líbivého webu, proto dbejte na zarovnání obsahu do virtuální mřížky.

CSS Grid

Systém mřížky MultiWebu je založen na CSS Gridu, který umožnuje tvořit layout jednoduše, efektivně, precizně a předvídatelně. Obecně je CSS Grid vhodné využívat jak na úrovni celkového layoutu stránky, tak na úrovni jednotlivých komponent.

Užitečné odkazy

Sloupce

Základním použitím gridu je uspořádání potomků do sloupců. Jednoduše si vyberte, vyberte číslo v rozmení 1–12, o zbytek se postará grid. Ve výchozím stavu je využito 12 sloupců.

Doporučeno Pro vlastní specifické rozložení stránky nebo komponenty vyzkoušejte property grid-template-areas.

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
1
2
3
4
5
1
2
3
1
2
1

HTML only

<div class="grid"></div>
<div class="grid grid--9"></div>
<div class="grid grid--5"></div>
<div class="grid grid--3"></div>
<div class="grid grid--2"></div>
<div class="grid grid--1"></div>

Less only

<div class="foo foo--12-columns"></div>
<div class="foo foo--9-columns"></div>
...
.foo {
	display: grid;
}

.foo--12-columns {
	.gridColumns(12); // Využití připraveného mixinu
}

.foo--9-columns {
	grid-template-columns: repeat(9, 1fr); // Ruční zápis
}

Responzivní grid

Grid 2 ➞ S 3 ➞ M 6

1
2
3
4
5
6
7
8
9
10
11
12

HTML only

<div class="grid grid--2 grid--s-3 grid--m-6"></div>

Less only

<div class="foo"></div>
.foo {
	display: grid;
	.gridColumns(2);

	@media @size-s {
		.gridColumns(3);
	}

	@media @query-m {
		.gridColumns(6);
	}
}

Tip Třídy a selektory pro responzivní grid vychází z názvů media queries.

Grid 1 ➞ S 2 ➞ M 3 ➞ L 4

1
2
3
4
5
6
7
8
<div class="grid grid--1 grid--s-2 grid--m-3 grid--l-4"></div>

Grid 2 ➞ S 3 ➞ M 4 ➞ L 6 ➞ XL 8 ➞ XXL 10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="grid grid--2 grid--s-3 grid--m-4 grid--l-6 grid--xl-8 grid--xxl-10"></div>

Auto-fit & Auto-fill

CSS Grid nabízí také jednoduché zarovnání obsahu do mřížky pomocí properties auto-fit a auto-fill. Tyto vlastnosti využijete hlavně v případě, že nedokážete přesně odhadnout, do kolika sloupců grid rozdělit, ale víte, jak zhruba by měl být jeden sloupec široký. Pomocí dvou řádků v CSS tak vytvoříte responzivní grid bez nutnosti použití media queries.

Tip Obě vlastnosti produkují při dvou a více řádcích totožný výsledek. Pokud jsou položky pouze v jednom řádku, zobrazení se liší. Použijte tedy jednu z properties dle požadavků na obsah elementu.

1
2
3
4
5
6
7
1
2
3
4
5
6
7
<div class="foo"></div>
<div class="bar"></div>
.foo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
}

.bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}

Rozsah položky

Jednotlivé položky gridu lze škálovat v rámci mřížky samotné. Pro sloupce a řádky jsou připraveny třídy s rozsahem od 1 do 12.

1
col--2
row--2
2
col--4
3
row--2
4
col--3
row--2
5
col--2

HTML only

<div class="grid grid--6">
     <div class="col--2 row--2"></div>
     <div class="col--4"></div>
     <div class="row--2"></div>
     <div class="col--3 row--2"></div>
     <div class="col--2"></div>
</div>

Less only

<div class="foo"
     <div class="foo__item"></div>
     <div class="foo__item"></div>
     <div class="foo__item"></div>
     <div class="foo__item"></div>
     <div class="foo__item"></div>
</div>
.foo {
	display: grid;
	.gridColumns(6);
}

.foo__item {
	&:nth-child(1) {
		.colSpan(2);
		.rowSpan(2);
	}

	&:nth-child(2) {
		.colSpan(4);
	}

	&:nth-child(3) {
		.rowSpan(2);
	}

	&:nth-child(4) {
		.colSpan(3);
		.rowSpan(2);
	}

	&:nth-child(5) {
		.colSpan(2);
	}
}

Responzivní rozsah

1
col--4 col--l-1 row--l-1
2
col--4 col--l-3 row--l-3
3
col--4 col--l-1 row--l-2

Tip Třídy pro responzivní rozsah vychází z názvů media queries.

<div class="grid grid--4">
     <div class="col--4 col--l-1 row--l-1">1</div>
     <div class="col--4 col--l-3 row--l-3">2</div>
     <div class="col--4 col--l-1 row--l-2">3</div>
</div>

Na celou šířku

1
2
3
4
5
6 👻
7
8
9
10
11
12
13
14
15
<div class="grid grid--3 grid--m-6 grid--xl-8 grid--gap-1 grid--flow-dense">
    ...
    <div class="foo">5</div>
    <div class="foo col--full">6 👻</div>
    <div class="foo">7</div>
    ...
</div>

Tip Pro responzivní plnou šířku využijte modifikátory --s-full až --xxl-full.

Upozornění U implicitního gridu nelze dopředu vypočítat případný rozsah na celou výšku, proto row--full roztáhnutí řádku nemusí fungovat.

Reset

Jakýkoli rozsah col a row lze obnovit pomocí modifikátoru --reset a také responzivních modifikátorů --s-reset až --xxl-reset.

Mezera

CSS Grid umí vytvářet mezery pouze mezi svými prvky. V praxi to znamená, že není potřeba paddingů a záporných marginů, jako tomu typicky u CSS layout systemů bývá. Vyberte číslo v rozmezí 1–8 pro velikost mezery. Ve výchozím stavu se mezera nevkládá.

HTML only

<div class="grid grid--6 grid--gap-1"></div>

Less only

<div class="foo"></div>
.foo {
	display: grid;
	.gridColumns(6);
	.gridGap(1);
}
<div class="grid grid--6 grid--gap-3"></div>
<div class="grid grid--6 grid--gap-6"></div>

Responzivní mezera

Grid Gap 1 ➞ S 2 ➞ M 3 ➞ L 4

Tip Třídy pro responzivní mezeru vychází z názvů media queries.

<div class="grid grid--6 grid--gap-1 grid--gap-s-2 grid--gap-m-3 grid--gap-l-4"></div>

Pomocné třídy gridu

Některé z často používaných properties nebo kombinace properties jsou přístupné jednoduše díky pomocným třídám.

Dense flow

Může se stát, že některá položka se již nevejde do příslušného řádku a grid ji automaticky přesune na další řádek. Nastavte třídu grid--flow-dense pro automatické přeskládání položek tak, aby "díry" v gridu byly co nejmenší.

1
2
3
4
5
6
7
Najeďte sem

Spacing

<div class="foo grid--gap-1 grid--spaced-[around|between|evenly]"></div>
.foo {
	display: grid;
	grid-template-columns: repeat(4, 64px);
	grid-template-rows: repeat(4, 64px);
	padding: var(--base-2);
	border: 1px solid;
	border-radius: calc(var(--radius) * 1.5);
	.themify(border-color, @divider);
}