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.

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
}
Doporučeno

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

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);
}