Základna: Grid Framework

Mřížka kompletně tvoří layout obsahu, je postavena na kombinaci 12 sloupcového a 20 sloupcového gridu, aby bylo možné pokrýt všechny varianty layoutu. Mřížka se v Solidpixels tvoří pomocí Layout Builderu, který je omezen na maximálně 6 sloupců.

12 sloupcový layout

12 / 12
6 / 12
6 / 12
4 / 12
4 / 12
4 / 12
3 / 12
3 / 12
3 / 12
3 / 12
4 / 20
4 / 20
4 / 20
4 / 20
4 / 20
2 / 12
2 / 12
2 / 12
2 / 12
2 / 12
2 / 12

Asymetrické

4 / 12
8 / 12
8 / 12
4 / 12
2 / 12
8 / 12
2 / 12
3 / 12
3 / 12
6 / 12

Offsety

Určují odsazení sloupce od pravého nebo levého okraje mřížky. Offset ze aplikovat pouze na jednosloupcový layout.

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

Vnořený grid

Kromě klasické mřížky je možné pomocí Layout Builderu poskládat i zanořený grid. Vnořená mřížka je omezena na 4 sloupce, aby se předešlo nesmyslným kombinacím.

6 / 12
6 / 12
6 / 12
6 / 12

 

6 / 12

 

 

3 / 12

 

3 / 12
3 / 12
3 / 12
3 / 12
3 / 12
3 / 12
3 / 12
3 / 12
8 / 12
6 / 12
6 / 12

Obsahová mřížka

Kromě gridu určeného pro layout jsou k dispozici ještě třídy, kterými lze naformátovat do symetrického gridu libovolný seznam prvků. Grid je postaven na flexboxu s fallbackem pro prohlížeče, které ho nepodporují. Mřížka je obecná a využitelná ve výpisech, galerii apod.

1/3 šířky
1/3 šířky
1/3 šířky
1/3 šířky
1/3 šířky

Responzivní grid

Třídami lze změnit zobrazení sloupců v typických situacích. Přehled tříd je v s ukázkami na stránce Grid v2