Jak používat 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, 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;
}

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*