9. diel - CSS grid - Princípy a layout

V predchádzajúcej lekcii, Grid systém od Flexbox Grid, sme si ukázali, ako sa pracuje s grid systémom od flexboxgrid.com.

V tomto CSS tutoriálu si predstavíme CSS grid systém a akým spôsobom ho môžeme využiť na tvorbu layoutu webu.

Motivácia

Aby sa naše webové stránky dobre čítali a používali, je potrebné obsah na nich dobre rozložiť. K tomu využívame layouty (rozloženie).

Layout stránky obvykle obsahuje hlavičku, telo a pätu. Samozrejme sa ale môže jednať o akýkoľvek iný layout, napr. ak budeme tvoriť webovú hru Pexeso, bude layout stránky mriežka o niekoľkých riadkoch a stĺpcoch kartičiek.

Na tvorbu layoutov sa v súčasnosti používajú tri technológie:

• Flexbox - Flexbox je primárne jednorozmerný kontajner, určený na organizáciu prvkov vedľa seba alebo pod seba. Postačí nám na layouty jednoduchých webov. V našich kurzoch sme takto vytvorili layout napr. v lekcii Štýlovanie hlavičky HTML stránky a flexbox. Zložitejšie layouty môžeme tvoriť tak, že použijeme viac flexboxov.
• CSS grid - Grid je opäť natívny systém zobrazenia v CSS, ktorý funguje podobne ako flexbox, len je dvojrozmerný. Jedná sa teda o mriežku. Pre jednoduché layouty je zbytočne zložitý, pre zložitejšie rozloženie prvkov na stránke nám naopak ušetrí veľa práce a to hlavne, keď rozloženie pripomína mriežku (čo tak často je).
• Bootstrap grid/Flexbox grid - Bootstrap je populárny CSS framework tretej strany, ktorý musíme do svojich stránok najprv stiahnuť alebo na neho odkazovať. Obsahuje svoj vlastný systém na tvorbu layoutov - Bootstrap grid, ktorý je zložitosťou a účelom niekde medzi dvoma vyššie spomenutými. Zásadný rozdiel medzi Bootstrapom a riešením cez CSS je, že Bootstrap štýly sa nenastavujú v CSS, ale priamo v HTML pomocou atribútov class. Tento prístup môže byť o niečo rýchlejší, ale zas vyžaduje použitie externej knižnice. Už sme si ho predstavovali v podobe Flexbox Grid, čo je principiálne vlastne to isté riešenie, ako používa Bootstrap.

Dnes sa teda zameriame na komplexnejšie natívne riešenie, ktorým je CSS grid.

Čo je CSS Grid?

CSS Grid je systém pre dvojrozmerné usporiadanie prvkov na stránke. Vytvorí nám na danom obalovom elemente virtuálnu mriežku, do ktorej môžeme umiestňovať rôzne prvky a ovládať ich rozmiestnenie a rozmery.

Termín mriežka nebudeme zamieňať s termínom tabuľka, ktorá v HTML neslúži na rozloženie celej stránky, ale len na prezentáciu vybraných tabuľkových dát.

HTML stránka

Ako prvé si pripravíme stránku s niekoľkými elementmi, ktoré vložíme do kontajnera <div>:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

Základy syntaxe

Podobne ako flexbox aj grid aktivujeme pomocou vlastnosti display obalového elementu (kontajnera) a to ako:

• display: grid alebo
• display: inline-grid v prípade, že chceme, aby bola mriežka ako riadkový element (napr. ju chceme umiestniť vedľa ďalšieho obsahu).

Základná syntax vyzerá takto:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

Vysvetlime si použité vlastnosti:

• grid-template-columns - Nastavuje počet a rozmer jednotlivých stĺpcov mriežky. V príklade vyššie vytvárame mriežku s tromi stĺpcami. Jednotka fr označuje frakciu (fraction), čím udávame, že každý stĺpec bude mať rovnakú veľkosť.
• grid-template-rows - Určuje počet a rozmer jednotlivých riadkov, podobne tu takto vytvárame dva riadky.
• gap - Medzera medzi stĺpcami a riadkami. Môžeme špecifikovať zvlášť aj medzeru medzi stĺpcami (column-gap) a medzi riadkami (row-gap).

Aby sme videli, že sa elementy naozaj uskupili do mriežky, pridajme si aj farebné pozadie pre položky gridu:

.container > div {
    background: #b3deff;
}

Selektor > označí len elementy <div> vložené priamo v gride, na ďalšie elementy sa už aplikovať nebude.

Výsledkom je jednoduchá mriežka:

Funkcia repeat()

Aby sme nemuseli v CSS kóde neustále opisovať 1fr, prípadne iné násobky frakcií, používa sa často na definovanie stĺpcov a riadkov CSS funkcia repeat(). Tá berie dva parametre:

• koľkokrát chceme danú hodnotu opakovať
• čo chceme opakovať

Kód môžeme upraviť do nasledujúcej podoby, fungovať bude stále rovnako:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
}

Pozicovanie elementov

V našej ukážke teraz máme šesť elementov, ktoré sa automaticky postupne rozdistribuovali do šiestich buniek našej mriežky. Mriežka je ale naozaj virtuálna a v niektorých bunkách nemusí byť žiadny element alebo naopak jeden element môže byť vložený cez viac stĺpcov a riadkov. Upravme náš HTML príklad do nasledujúcej podoby:

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
</div>

A CSS upravme takto:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.container > div {
    background: #b3deff;
}

.item1 {
    grid-column: 1;
    grid-row: 2;
}

.item2 {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
}

Výsledok:

Element 1 je teraz vložený v prvom stĺpci a druhom riadku. Element 2 je vložený v druhom stĺpci a prvom riadku a je roztiahnutý až do druhého riadku a tretieho stĺpca.

Môže byť mätúce, že pri roztiahnutí cez viac riadkov a stĺpcov uvádzame vždy o 1 vyšší stĺpec a riadok. Dôvodom je, že v skutočnosti špecifikujeme "čiaru" (tzv. grid lines), kam až sa má stĺpec/riadok natiahnuť. Situáciu určite pochopíte z obrázka nižšie, kde sú nakreslené a očíslované pomyselné čiary, podľa ktorých potom určujeme, kam sa má element roztiahnuť:

Zápis:

.item2 {
    grid-column: 2 / 3;
}

Je potom skráteným zápisom:

.item2 {
    grid-column-start: 2;
    grid-column-end: 3;
}

Udávanie veľkosti

Veľkosť stĺpcov a riadkov by sme mohli zadať aj v px, obvykle ale chceme, aby sa bunky roztiahli so šírkou stránky. Výhodné je jednotky px miešať s fr, čím môžeme napr. vytvoriť klasický layout s hlavičkou, sidebarom a pätou, kde ľahko roztiahneme zvyšok mriežky cez zvyšok stránky:

.container {
    grid-template-columns: 100px 1fr 1fr;
}

Výsledok:

Príklad - Tvorba layoutu

Konečne máme dostatok znalostí na praktickú ukážku layoutu Pomocou CSS grid vytvorme najklasickejší layout webu.

HTML:

<div class="container">
    <nav>navigation</nav>
    <aside>sidebar</aside>
    <article>content</article>
    <footer>footer</footer>
</div>

CSS:

.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 50px 1fr 50px;
    gap: 10px;
}
.container > nav, aside, article, footer {
    background: #b3deff;
}
.container > nav {
    grid-column: 1 / 3;
    grid-row: 1;
}
.container > aside {
    grid-column: 1;
    grid-row: 2 / 3;
}
.container > article {
    grid-column: 2 / 3;
    grid-row: 2;
}
.container > footer {
    grid-column: 1 / 3;
    grid-row: 3;
}

Výsledok:

Výsledkom je navigácia vysoká 50px, zaberajúca 100% stránky. Potom nasleduje 100px široký sidebar a obsah, ktorý zaberá zvyšok šírky. Celý tento riadok zaberá tiež toľko výšky, koľko je potrebné. Nasleduje päta vysoká 50px a široká 100% stránky.

Pomenovanie oblastí mriežky

Často, napr. aj v prípade nášho layoutu, majú určité časti mriežky určitý význam. CSS nám umožňuje tieto názvy definovať a potom pracovať len s nimi, namiesto čísel čiar. Slúži k tomu CSS vlastnosť grid-template-areas. Ukážme si, ako by to vyzeralo pre príklad layoutu vyššie:

.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 50px 1fr 50px;
    gap: 10px;
    grid-template-areas:
        "nav nav"
        "aside article"
        "footer footer";
}
.container > nav, aside, article, footer {
    background: #b3deff;
}
.container > nav {
    grid-area: nav;
}
.container > aside {
    grid-area: aside;
}
.container > article {
    grid-area: article;
}
.container > footer {
    grid-area: footer;
}

Ak niektorý priestor zasahuje do viacerých buniek, napíšeme jeho názov jednoducho viackrát. Potom si všimnite, že v ďalších štýloch používame už názvy týchto priestorov namiesto zložitého vymedzovania počiatočných a koncových stĺpcov a riadkov.

Výsledok je rovnaký:

Bonus - Ďalšie možnosti rozmerov

Na každú súčasť CSS by sa dal v podstate napísať celý kurz. Nemá zmysel sa ich všetky učiť, človek sa musí naučiť hlavne si dohľadávať informácie, keď ich potrebuje. Na záver si urobme aspoň predstavu o ďalších možnostiach gridu.

Vlastnosti grid-auto-rows a grid-auto-columns

Okrem template (šablónových) riadkov a stĺpcov môžeme definovať aj tzv. automatické auto riadky a stĺpce. To sú štýly pre riadky a stĺpce, ktoré sa vytvoria, keď do kontajnera pridáme viac elementov, než koľko má definovaných buniek v mriežke. Pre tieto automaticky vygenerované stĺpce a bunky môžeme nastaviť veľkosti pomocou vlastností grid-auto-rows a grid-auto-columns. Upravme náš príklad s číslami:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

A do CSS pridajme:

.container {
    /* ... */
    grid-auto-rows: 100px;
}

Výsledok:

Vidíme, že siedmy element sa pridal do nového tretieho riadku, ktorý má výšku definovanú na 100px.

CSS funkcia minmax()

Podobne môžeme použiť na definíciu výšky CSS funkciu minmax(), vďaka ktorej môžeme nastaviť ako minimálny, tak maximálny rozmer. Funkciu môžeme použiť ako pre riadky, tak pre stĺpce, a ako pre template, tak pre auto varianty. Ukážme si príklad:

.container {
    display: grid;
    grid-template-columns: minmax(auto, 1fr);
}

V tomto príklade minmax(auto, 1fr) hovorí, že stĺpce môžu mať akúkoľvek šírku, ktorá je najmenej auto a najviac 1fr. Hodnota auto znamená, že šírka bude aspoň taká veľká, ako je potrebné pre obsah, a 1fr znamená, že šírka môže zaberať celý zostávajúci priestor.

auto-fill a auto-fit

Pri použití funkcie repeat() môžeme zadať okrem pevného čísla aj hodnoty auto-fit alebo auto-fill. Automaticky sa potom vygeneruje taký počet buniek, aby sa do mriežky dané elementy vošli. Ukážme si na záver pre predstavu aj komplexnejší príklad skombinovaný s minmax():

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Týmto spôsobom vytvoríme mriežku, ktorá automaticky pridáva a odoberá stĺpce podľa veľkosti obrazovky, pričom minimálna šírka stĺpca je 200px. Hodnota auto-fill spôsobí doplnenie voľného priestoru neviditeľnými bunkami, zatiaľ čo auto-fit sa zameriava na rozširovanie už existujúcich buniek.

V ďalšej lekcii, Úvod do Bootstrapu, sa uvedieme do frameworku Bootstrap a ukážeme si jeho základné princípy.