Lekce 7 - Úvod do CSS grid systémů

V minulé lekci, Flexbox - Tvorba layoutů, jsme si ukázali CSS flexbox.

V tomto tutoriálu responzivního webdesignu se podíváme na grid systémy. Ukážeme si, jací "předchůdci" grid systémů se používaly a nakonec si představíme dva CSS frameworky, které tuto problematiku komplexně řeší.

Úvod do grid systémů

Na začátek by se slušelo problematiku gridů nastínit, začněme hezky od začátku. Rozdělení obsahu do pravidelné mřížky se netýká jen webů, ale tento princip je používán v podstatě již od středověku. Platí nejen pro text, ale i pro ilustrace. Nalezneme jej v novinách a časopisech. Možná víte, že loga většiny firem jsou také vytvořena na základě pravidelných tvarů, které k sobě lícují. Kromě toho, že mřížka plní estetickou funkci, je pro lidi takto zarovnaná informace mnohem lépe zpracovatelná. Podívejme se na layout populární šablony Gentelella od frameworku Bootstrap pro administraci webu:

Vidíme, že layout je rozdělený do šesti pomyslných sloupců. Všechny kontejnery na stránce mají potom velikost jen a pouze v násobcích velikosti těchto sloupců. Celý web působí velmi celistvým dojmem.

Pokud budeme prvky pozicovat jak nás napadne, můžeme dopadnout jako legendární stránky Penzionu na Hrubých lukách:

Dnes mají naštěstí již jiné stránky

Tabulky

V dobách již dávno minulých se pro tvorbu layoutů internetových stránek používaly tabulky. Jejich výhodou bylo, že obsah webu byl opticky zarovnán do tabulky, takže rozložení působilo pravidelně a vyváženě. Taková tabulková kostra zastaralého webu by mohla vypadat např. takto:

<table>
    <tr>
        <td colspan="2"><h1>Hlavička</h1></td>
    </tr>
    <tr>
        <td><h2>Menu</h2></td>
        <td>Obsah...</td>
    </tr>
    <tr>
        <td colspan="2"><small>Patička</small></td>
    </tr>
</table>

Výsledek v prohlížeči:

Tabulky se pro pozicování prvků na stránce již nepoužívají kvůli dvěma závažným nedostatkům:

• Nejsou sémantické - Tabulku vyhledávače chápou jako nějaký zdroj dat. Pokud do nich vložíme celou stránku nebo jen její část s obsahem, nebudou tomu pravděpodobně rozumět, což se nám může projevit nižší návštěvností.
• Nejsou responzivní - Pokud stránku s tabulkou zmenšíme, tabulka se nezalomí, ale zobrazí ošklivý posuvník. Na mobilních zařízeních by byl tabulkový web téměř nepoužitelný.

Grid systémy

Webdesigneři přemýšleli nad tím, jak vytvořit mřížku bez elementu <table>, aby se vyhnuli jeho nedostatkům. Tím se vyvinuly tzv. grid systémy. To jsou předpřipravené třídy, které přiřazujeme např. elementům <div> a ty následně získávají určitou šířku. Systémy obvykle fungují tak, že rodičovský element rozdělí do 12 sloupců. Dříve se k tomu využívala šířka zadaná v procentech, jeden sloupec tedy zabíral 8,33%. Dnes se využívá Flexbox. Číslo 12 bylo vybráno proto, že má mnoho dělitelů. Do kontejneru tak můžeme vložit:

• Element přes celou šířku (velikost 12 sloupců)
• Element přes polovinu šířky (velikost 6 sloupců)
• Element přes třetinu šířky (velikost 4 sloupců)
• Element přes čtvrtinu šířky (velikost 3 sloupců)
• Element přes 1/6 šířky (velikost 2 sloupců)
• A element přes 1/12 šířky (velikost 1 sloupce)

Samozřejmě můžeme nastavovat i násobky těchto hodnot, např. vložit do kontejneru element, který zabere 2/3 obsahu a tudíž bude nastavený na šířku 8 sloupců apod. Naopak nejsme schopni vložit např. 5 elementů vedle sebe, můžeme vložit buď 4 nebo 6. Toto omezení je daní za estetickou pravidelnost danou mřížkou:

Pokud chceme grid systém na svých stránkách používat, máme víceméně dvě možnosti:

• použít již zmiňovaný CSS framework Bootstrap (o kterém zde na síti máme kompletní kurz),
• použít framework Flexbox Grid od Kristofera Josepha. Tento framework nemění vzhled naší stránky a neupravuje jiné elementy, stará se jen a pouze o grid systém.

V kurzu si ukážeme obě možnosti a začneme s Flexbox Grid.

Flexbox Grid

Přejdeme na stránky http://flexboxgrid.com/, kde je velmi stručná dokumentace. Na tu se ale podíváme společně a přehledně v další lekci

Abychom si Flexbox Grid vyzkoušeli, založíme si adresář flexbox_grid/ a v něm soubor index.html. K tomu budeme mít ještě vlastní CSS soubor style.css, protože Flexbox Grid řeší hlavně rozložení do sloupců, ale barvy/okraje apod. si budeme stylovat sami.

Flexbox Grid do projektu přidáme pomocí CDN odkazu (načte se z internetu):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" />

Celý zdrojový kód stránky bude vypadat takto:

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ukázka Flexbox Gridu</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="row">
        <div class="col-xs-3 box">Čtvrtina</div>
        <div class="col-xs-3 box">Čtvrtina</div>
        <div class="col-xs-6 box green">Polovina</div>
    </div>
</body>
</html>

Jako první je nutné definovat řádek, kterým obalíme všechny sloupce. Ten definujeme jako <div> se třídou .row. Sloupce se definují také jako <div>, kterému přidáme třídu .col-X-Y, kde za X a Y dosadíme:

• X může nabývat hodnot od nejmenšího xs (telefony), sm, md až lg. Tímto udáváme, od jaké velikosti zařízení začíná styl platit. Více si o tomto povíme v další lekci.
• Y nabývá hodnot 1 až 12 a udává, kolik sloupců bude element zabírat. Všechny elementy v jednom řádku nemohou zabírat dohromady více než 12 sloupců. Stejně jako vidíme nahoře v příkladu: 3 + 3 + 6 = 12.

Abychom viděli, jak jsou sloupce rozdělené, přidáme si jednoduché CSS styly do souboru style.css:

body {
    font-family: sans-serif;
    padding: 1rem;
}

.box {
    background-color: #ff7f7f;
    border: 1px solid #333;
    padding: 1rem;
    text-align: center;
}

.green {
    background-color: #7fff7f;
}

Výsledek v prohlížeči:

Ukázka výše ještě není responzivní. Na to se vrhneme ale příště

V další lekci, Grid systém od Flexbox Grid, si rozšíříme znalosti ohledně grid systému od flexboxgrid.com.