Grid systém

Všechny obecné třídy pro použití v gridu nalezneme v jednom souboru.

Třída --content slouží jako container pro obsah. Centruje obsah a zároveň omezuje šířku.

Použití třídy --content

{* Header *}

<header class="header js--header">

    <div class="header__content --content --flex">

    </div>

</header>

Sloupečky fungují podobně jako například v Bootstrap či jiném gridovém systému.

Styl zápisu sloupce: --w-12, --w-{size}-3

Příklad využití sloupců

        <div class="footer__content --content --flex">
            
            <div class="footer__section --w-12 --w-s-6 --w-l-3">

            </div>

        </div>

Pokud potřebujeme mezi sloupci udělat mezeru mezi sloupci podle návrhu, obalíme do divu s názvem např. section__list a tímto stylem nastavíme CSS.

Můžeme také použít obecnou třídu --row na seznam a --column na sloupec (lepší způsob pokud nenastavujeme jiné paddingy). Nastavení těchto obecných tříd je prakticky stejné.

.--row{
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 16px); /* 8px column offset */
	margin: 0 -8px; /* 8px column offset */
}

.--column{
	display: flex;
	flex-direction: column;
	padding: 0 8px; /* 8px column offset */
}

.section__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: calc(100% + 16px);
	margin: 0 -8px 0 -8px; /* 16px negative offset */
}

.section__item {
	padding: 0 8px; /* 16px space between items */
	display:flex;
	align-items: stretch;
}