Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij slevové akce 30% výuky zdarma!
Swift týden

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

V minulé lekci, Responzivní obrázky - Resolution switching a Art redirection, jsme si ukázali několik způsobů, jak přizpůsobit obrázky na našem webu.

Dnes 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 Gantella od frameworku Bootstrap pro administraci webu:

Šablona Gantella pro Bootstrap

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:

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>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Výsledek v prohlížeči:

Tabulkový layout
tabulkovy_lay­out.html

Tabulky se pro pozicování prvků na stránce již nepoužívají kvůli 2 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:

grid systém

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 uvedena velice stručná dokumentace. Na tu se ale podíváme společně a přehledně v další lekci :)

Flexbox Grid si buď stáhněte a přidejte do svého HTML souboru nebo použijte CDN odkaz:

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

Ukažme si rovnou příklad:

<div class="row">
      <div class="col-xs-3">Čtvrtina</div>
      <div class="col-xs-3">Čtvrtina</div>
      <div class="col-xs-6">Polovina</div>
</div>

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, mdlg. 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 112 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.

Výsledek v prohlížeči:

Your page
localhost

Ukázka výše ještě není responzivní. Na to se vrhneme ale příště ;) Ukázku jsem trochu nastyloval v CSS, aby byl výsledek lépe vidět.

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


 

Předchozí článek
Responzivní obrázky - Resolution switching a Art redirection
Všechny články v sekci
Responzivní webdesign
Článek pro vás napsal Štěpán Zavadil
Avatar
Jak se ti líbí článek?
2 hlasů
Autor se věnuje tvorbě webových aplikací v JavaScriptu
Aktivity (2)

 

 

Komentáře

Avatar
Karel Špáda:28. května 9:44

Docela by mě zajímalo, k čemu jsou vlastně dneska všechny tyhle gridy, když máme grid přímo v CSS (a pokud chci nastavit jen sloupce, je to CSS kód na 3 řádky...). Ze zařízení, které mám v okolí k dospizici, CSS grid nefunguje jen na 10 let starém iPadu (nemá už k dispozici upgrade na iOS 10, to by musel být asi jen 8 let starý:) - ale na něm nefunguje pořádně ani flexbox, tak tady důvod nevidím. Takže pak mě napadá už jen to, že s flexboxgridem si píšu "všechno formátování" pěkně přímo v HTML - ale ten kód plný col, xs, sm, apod. se mi nikdy nelíbil (CSS mám přece taky mimo HTML, a když ne, jsem za trotla), a že se člověk nemusí "piplat" s @media (resp. se s tím piplá přes ty xs, sm a spol., ale to jsme zase u předešlé závorky...). Na druhou stranu jsem teď fakt dlouho pořádně nekódoval a zkouším se k tomu vrátit, tak mě pls někdo vyveďte z temnot nevědomosti ;-)

 
Odpovědět
28. května 9:44
Avatar
Jurajs
Člen
Avatar
Odpovídá na Karel Špáda
Jurajs:29. května 16:46

Ahoj, je to jednoduché, pokud se ti to nelíbí, tak to piš čistě bez FW a flexboxgridu.

Čtyř sloupcový grid ti udělám bez FW zachvilku a nepotrebuju k tomu FW a ani flexboxgrid ;) A jeste k tomu to bude plne responzivni ;) Media queries budeš používat pořád, tomu se nevyhneš....

 
Odpovědět
29. května 16:46
Avatar
Karel Špáda:1. června 9:54

Právě že mi taky přijde
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 30px;
docela stručné, i když přidám @media.
Navíc jsem si teď nedávno zkusil přidat Bootstrap a FontAwesome do stylu a moje formátování začínalo na řádku asi 10 358 ;-)

 
Odpovědět
1. června 9:54
Avatar
Jurajs
Člen
Avatar
Odpovídá na Karel Špáda
Jurajs:1. června 18:14

Aha, no tak tenhle grid v CSS není úplně ideální, protože co vím tak některé verze prohlížečů ho nepodporují....

 
Odpovědět
1. června 18:14
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jurajs
Člen
Avatar
Odpovídá na Karel Špáda
Jurajs:2. června 13:34

Pokud chceš radu zkus používat tohle - https://www.itnetwork.cz/…nich-layoutu ;)

....Už nepotřebuji používat Bootstrap a další frameworky ;)

 
Odpovědět
2. června 13:34
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Karel Špáda
David Čápka:2. června 14:21

Pokud vím, grid v CSS je něco jiného, používám ho, když potřebuji udělat opravdu mřížku X krát X políček (např. jsem tak dělal pexeso). CSS gridy vytvořené CSS styly alá Bootstrap ti umožňují definovat různé šířky elementů pro různě velká zařízení, aniž by sis musel dělat ty třídy. Nevím, zda tohle CSS grid umí, ale ty třídy tam určitě definované nejsou.

Odpovědět
2. června 14:21
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jurajs
David Čápka:2. června 14:22

Už nepotřebuji používat Bootstrap a další frameworky ;-)

Bootstrap a další frameworky právě používají flexbox. Jde jen o to, že si ty styly nemusíš psát pořád znovu sám pro každý element, ale jen přiřadíš nějakou jejich třídu. To je ostatně princip všech frameworků.

Odpovědět
2. června 14:22
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Karel Špáda:2. června 16:20

Jasně, že chci radu, snažím se zorientovat :)
Díval jsem se teď schválně na CanIUse, grid-* má podporu plnou 93,99% (https://caniuse.com/#…), display:flex 93.51% (plnou) / 95.27% (částečnou) (https://caniuse.com/#…) - počítáno bez prefixu. Rozdíl nic moc...
Jinak k CSS gridu - rozumím, že je hlavně o "čtvercové síti", ty tři řádky, co jsem napsal výše, prostě jen vyrobí 4 sloupečky, do kterých se postupně řadí přímí potomci (a přetékají do dalších řádků), což asi pro vytvoření layoutu ala Gantella ze začátku článku nestačí (to by asi byl složitější grid :), ale pro řadu jednoduchých aplikací (třeba fotogalerie) to z mého pohledu úplně vyhovuje. Jinak těmi třemi řádky si samozřejmě taky nastyluju třídu, ale do HTML už pak nemusím všude psát, kolik colů mi to má zabrat. Takže kromě toho, že se mi ten kód subjektivně líbí víc, změnu počtu sloupců řeším na jednom místě v CSS změnou jednoho čísla. Přijde mi, že frameworky podobné tomu v článku spíš těží ze setrvačnosti, protože je řada lidí zvyklá na col-sm...

 
Odpovědět
2. června 16:20
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.