CSS Grid od základov: stĺpce cez grid-template-columns

CSS Grid je spôsob, ako v CSS vytvárať rozloženie prvkov do mriežky. Môžeme si ho predstaviť ako tabuľku, ale bez toho, aby sme museli používať HTML tabuľku.

Grid sa často používa na karty, galérie, zoznam článkov, produkty, layout stránky alebo rôzne bloky, ktoré majú byť pekne uložené v stĺpcoch a riadkoch.

Dôležité je pochopiť jednu vec hneď na začiatku:

Grid nastavujeme na rodičovi.

Rodič je prvok, ktorý obsahuje ďalšie prvky. V našom príklade bude rodičom prvok s triedou .ukazka a jeho deti budú jednotlivé karty.

Základné HTML

Začneme jednoduchým HTML. Máme nadpis a pod ním jeden obaľovací prvok .ukazka. Vnútri sú jednotlivé karty.

<body>
    <h1>blog</h1>

    <div class="ukazka">
        <div class="karta">1</div>
        <div class="karta">2</div>
        <div class="karta">3</div>
        <div class="karta">4</div>
        <div class="karta">5</div>
        <div class="karta">6</div>
    </div>
</body>

A k tomu si pripravíme základné CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 2rem;
    font-family: Arial, sans-serif;
}

h1 {
    margin-bottom: 1rem;
}

.ukazka {
    border: 1px solid #a50000;
}

.karta {
    padding: 2rem;
    border: 1px solid #555;
    background: #f2f2f2;
    text-align: center;
}

Zatiaľ sme ešte Grid nepoužili. Prvky sa zobrazia normálne pod sebou, pretože div je blokový prvok.

Zapnutie Gridu

Ak chceme začať používať CSS Grid, musíme ho zapnúť na rodičovi.

Rodičom je v našom prípade .ukazka.

.ukazka {
    border: 1px solid #a50000;
    display: grid;
}

Týmto zápisom hovoríme:

„Prvky vo vnútri .ukazka sa budú správať ako položky gridu.“

Lenže pozor. Keď dáme iba display: grid;, ešte sme nepovedali, koľko chceme stĺpcov.

Preto sa na prvý pohľad nemusí stať nič výrazné. Karty budú stále pod sebou.

Grid sme síce zapli, ale ešte sme nenakreslili mriežku.

Prvé stĺpce cez grid-template-columns

Na vytvorenie stĺpcov používame vlastnosť grid-template-columns.

Názov môže vyzerať zložito, ale význam je jednoduchý:

grid-template-columns znamená: „ako majú vyzerať stĺpce v gride“.

Skúsime vytvoriť tri stĺpce, každý široký 200px.

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

Týmto sme povedali:

  • prvý stĺpec má 200px,
  • druhý stĺpec má 200px,
  • tretí stĺpec má 200px.

Výsledok bude približne takýto:

1   2   3
4   5   6

Grid automaticky ukladá deti do stĺpcov. Keď sa prvý riadok zaplní, ďalšie prvky idú do ďalšieho riadku.

Problém s pevnými pixelmi

Zápis s pixelmi je jednoduchý na pochopenie, ale v praxi môže byť problémový.

grid-template-columns: 200px 200px 200px;

Tri stĺpce po 200px znamenajú dokopy 600px.

Ak má obrazovka alebo rodičovský prvok menej miesta, grid sa nezačne automaticky správať ako flexbox. Bude sa stále snažiť držať tri stĺpce po 200px.

To môže spôsobiť, že obsah začne pretekať mimo obrazovky.

Preto sa pri gride často používajú pružnejšie jednotky.

Automatická šírka stĺpcov cez auto

Okrem pevných hodnôt v pixeloch môžeme pri stĺpcoch použiť aj hodnotu auto.

Zápis môže vyzerať takto:

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: auto auto auto;
}

Tento zápis znamená:

„Vytvor tri stĺpce a ich šírku urč automaticky podľa obsahu.“

Dôležité je, že medzi hodnotami nepíšeme čiarky.

grid-template-columns: auto auto auto;

Nie:

grid-template-columns: auto, auto, auto;

Pri auto sa stĺpec prispôsobuje obsahu. Ak je obsah krátky, stĺpec môže byť užší. Ak je obsah dlhší, stĺpec môže byť širší.

Napríklad:

<div class="ukazka">
    <div class="karta">Krátke</div>
    <div class="karta">Toto je dlhší text v karte</div>
    <div class="karta">Krátke</div>
</div>

Druhý stĺpec môže byť širší, pretože má v sebe viac textu.

Aj tu môžeme použiť kratší zápis cez repeat():

grid-template-columns: repeat(3, auto);

Tento zápis znamená to isté ako:

grid-template-columns: auto auto auto;

V praxi sa však na bežné karty často viac hodí jednotka fr, pretože rovnomerne rozdelí dostupný priestor.

Jednotka fr

V CSS Grid existuje jednotka fr.

Môžeme si ju predstaviť ako časť dostupného priestoru.

Keď napíšeme:

grid-template-columns: 1fr 1fr 1fr;

znamená to:

„Rozdeľ dostupnú šírku na tri rovnaké časti.“

Celý zápis môže vyzerať takto:

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Ak má rodič šírku 900px, každý stĺpec bude mať približne 300px.

Ak má rodič šírku 600px, každý stĺpec bude mať približne 200px.

Ak má rodič šírku 300px, každý stĺpec bude mať približne 100px.

Čiže počet stĺpcov sa nemení. Stále máme tri stĺpce. Mení sa len ich šírka.

Rozdiel medzi px, auto a fr

Pri grid-template-columns môžeme použiť rôzne typy hodnôt.

grid-template-columns: 200px 200px 200px;

Toto vytvorí tri pevné stĺpce. Každý má presne 200px.

grid-template-columns: auto auto auto;

Toto vytvorí tri stĺpce, ktorých šírka sa počíta podľa obsahu.

grid-template-columns: 1fr 1fr 1fr;

Toto vytvorí tri stĺpce, ktoré si rovnomerne rozdelia dostupný priestor.

Veľmi zjednodušene:

  • px znamená: nastav presnú šírku,
  • auto znamená: prispôsob sa obsahu,
  • fr znamená: rozdeľ dostupné miesto.

Pridanie medzier cez gap

Aby sa karty nelepili jedna na druhú, použijeme vlastnosť gap.

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

gap pridá medzeru medzi stĺpcami aj riadkami.

Je to pohodlnejšie ako dávať každej karte margin.

Pri gride je lepšie nechať medzery riešiť rodiča. Rodič vie, ako sú prvky uložené, preto vie pekne vytvoriť medzery medzi nimi.

Skrátený zápis repeat()

Zápis:

grid-template-columns: 1fr 1fr 1fr;

funguje úplne v poriadku.

Ale ak máme rovnaké hodnoty, môžeme použiť kratší zápis cez repeat().

grid-template-columns: repeat(3, 1fr);

Tento zápis znamená:

„Zopakuj trikrát hodnotu 1fr.“

Čiže tieto dva zápisy robia to isté:

grid-template-columns: 1fr 1fr 1fr;

grid-template-columns: repeat(3, 1fr);

Kompletný príklad:

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

Stále platí, že máme presne tri stĺpce.

Nie dva, nie päť, nie šesť. Presne tri.

Mení sa iba ich šírka podľa dostupného priestoru.

Grid nie je Flexbox

Tu je dobré zastaviť sa.

Pri Flexboxe často používame:

display: flex;
flex-wrap: wrap;

A prvky sa vedia prirodzene presúvať na ďalší riadok, keď sa nezmestia.

Pri zápise:

grid-template-columns: repeat(3, 1fr);

Grid stále drží tri stĺpce.

Aj keď je obrazovka úzka, stále sa snaží mať tri stĺpce.

Preto pri takomto zápise potrebujeme riešiť responzivitu.

Responzivita cez media queries

Najjednoduchší a najčitateľnejší spôsob je použiť @media.

Povieme:

  • na veľkej obrazovke chcem 3 stĺpce,
  • na menšej obrazovke chcem 2 stĺpce,
  • na mobile chcem 1 stĺpec.
.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 800px) {
    .ukazka {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .ukazka {
        grid-template-columns: 1fr;
    }
}

Toto je veľmi dobrý zápis na ukážku, lebo presne vidíme, čo sa deje.

nad 800px  = 3 stĺpce
do 800px   = 2 stĺpce
do 500px   = 1 stĺpec

Tento spôsob je vhodný vtedy, keď chceme mať nad rozložením úplnú kontrolu.

Napríklad pri kartách služieb, článkoch alebo cenových balíkoch často chceme presne určiť, koľko kariet bude vedľa seba.

Kompletný príklad s pevne určeným počtom stĺpcov

Praktická verzia: 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 2rem;
    font-family: Arial, sans-serif;
}

h1 {
    margin-bottom: 1rem;
}

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.karta {
    padding: 2rem;
    border: 1px solid #555;
    background: #f2f2f2;
    text-align: center;
}

@media (max-width: 800px) {
    .ukazka {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .ukazka {
        grid-template-columns: 1fr;
    }
}

Tento zápis je jednoduchý:

  • najskôr máme 3 stĺpce,
  • potom ich zmeníme na 2,
  • nakoniec na mobile ostane 1 stĺpec.

Automatické stĺpce

Doteraz sme riešili situáciu, keď počet stĺpcov určujeme sami.

Napríklad:

grid-template-columns: repeat(3, 1fr);

To znamená:

„Chcem presne tri stĺpce.“

Ale niekedy nechceme stále písať media queries. Napríklad pri galérii obrázkov, produktoch alebo zozname kariet môžeme chcieť, aby si prehliadač sám vypočítal, koľko stĺpcov sa zmestí.

A tu prichádza na rad minmax(), auto-fit a auto-fill.

minmax()

Funkcia minmax() nastavuje minimálnu a maximálnu veľkosť stĺpca.

Vyzerá napríklad takto:

minmax(220px, 1fr)

Tento zápis znamená:

  • minimálna šírka stĺpca je 220px,
  • maximálna šírka stĺpca je 1fr.

Polopate:

„Stĺpec nech nie je užší ako 220px, ale keď je viac miesta, môže sa roztiahnuť.“

Samotné minmax() ešte neurčuje, koľko stĺpcov bude. Určuje len rozsah veľkosti jedného stĺpca.

Tri stĺpce cez repeat() a minmax()

Môžeme napísať aj toto:

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 1rem;
}

Tento zápis znamená:

„Chcem presne tri stĺpce a každý stĺpec nech má minimálne 220px, ale môže sa roztiahnuť.“

Toto je dôležitý rozdiel.

Stále máme presne tri stĺpce.

Čiže:

repeat(3, minmax(220px, 1fr))

znamená:

„Tri stĺpce. Každý minimálne 220px.“

Ak bude kontajner príliš úzky, môže vzniknúť problém s pretečením, pretože tri stĺpce po minimálne 220px potrebujú spolu dosť miesta.

Aj tu by sme teda často použili media queries.

Automatický počet stĺpcov cez auto-fit

Teraz príde zápis, ktorý vyzerá podobne, ale správa sa inak.

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

Toto už neznamená:

„Chcem presne tri stĺpce.“

Znamená to:

„Vytvor toľko stĺpcov, koľko sa zmestí. Každý stĺpec nech má minimálne 220px. Ak je viac miesta, stĺpce sa môžu roztiahnuť.“

Čiže na širšej obrazovke môže vzniknúť viac stĺpcov:

1   2   3   4
5   6

Alebo ešte viac:

1   2   3   4   5   6

Záleží od toho, koľko miesta má rodičovský prvok.

Toto je veľmi praktické pri galériách, produktoch alebo výpisoch, kde nevadí, že sa počet stĺpcov mení podľa dostupnej šírky.

Dôležitý rozdiel

Tieto dva zápisy nie sú rovnaké:

grid-template-columns: repeat(3, 1fr);

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

Prvý zápis:

repeat(3, 1fr)

znamená:

„Chcem presne tri stĺpce.“

Druhý zápis:

repeat(auto-fit, minmax(220px, 1fr))

znamená:

„Chcem automatický počet stĺpcov podľa dostupného miesta.“

Preto sa pri druhom zápise môže stať, že na veľkej obrazovke bude kariet vedľa seba 4, 5 alebo 6.

Čo ak chcem maximálne 3 stĺpce?

Toto je častá otázka.

Ak chceš mať na veľkej obrazovke maximálne tri stĺpce, najjednoduchší a najčitateľnejší zápis je stále tento:

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 800px) {
    .ukazka {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .ukazka {
        grid-template-columns: 1fr;
    }
}

Tento zápis je jasný:

  • desktop: 3 stĺpce,
  • tablet: 2 stĺpce,
  • mobil: 1 stĺpec.

Ak by sme použili auto-fit, prehliadač by si počet stĺpcov určoval sám. To je niekedy výhoda, ale nie vtedy, keď chceme presne kontrolovať maximum.

Obmedzenie cez max-width

Existuje aj druhý spôsob. Môžeme použiť automatický grid, ale obmedziť maximálnu šírku rodiča.

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;

    max-width: 760px;
    margin-inline: auto;
}

Tu hovoríme:

  • stĺpce sa skladajú automaticky,
  • jeden stĺpec má minimálne 220px,
  • celý grid nebude širší ako 760px,
  • grid bude zarovnaný na stred cez margin-inline: auto.

Keď obmedzíme šírku rodiča, nezmestí sa tam nekonečne veľa stĺpcov.

Tento spôsob je dobrý vtedy, keď chceme automatické skladanie, ale zároveň nechceme, aby sa karty na veľkom monitore roztiahli cez celú obrazovku.

auto-fit a auto-fill

Pri automatických stĺpcoch sa môžeme stretnúť s dvoma zápismi:

auto-fit
auto-fill

Najčastejšie budeme používať auto-fit.

Príklad:

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

auto-fit sa snaží prispôsobiť existujúce stĺpce dostupnému priestoru. Ak zostane voľné miesto, karty sa vedia pekne roztiahnuť.

auto-fill sa správa trochu inak. Vie vytvárať aj prázdne možné stĺpce.

Veľmi zjednodušene:

  • auto-fit je vhodné pre bežné responzívne karty,
  • auto-fill sa hodí skôr v špecifických prípadoch, keď chceme držať aj prázdne miesta v mriežke.

Pre bežné použitie, napríklad galériu alebo zoznam produktov, by som začal týmto:

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

Kompletný príklad s automatickými stĺpcami

Toto je praktická verzia bez media queries:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 2rem;
    font-family: Arial, sans-serif;
}

h1 {
    margin-bottom: 1rem;
}

.ukazka {
    border: 1px solid #a50000;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.karta {
    padding: 2rem;
    border: 1px solid #555;
    background: #f2f2f2;
    text-align: center;
}

Tento zápis je kratší, ale treba chápať, čo robí.

Nehovorí, že chceme tri stĺpce.

Hovorí, že každý stĺpec má mať minimálne 220px a prehliadač má vytvoriť toľko stĺpcov, koľko sa zmestí.

Kedy použiť ktorý zápis?

Ak chceš presný počet stĺpcov, použi:

grid-template-columns: repeat(3, 1fr);

A responzivitu rieš cez media queries.

Toto sa hodí napríklad na:

  • tri karty služieb,
  • tri výhody,
  • tri cenové balíky,
  • tri články v riadku.

Ak chceš automatické skladanie podľa šírky, použi:

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

Toto sa hodí napríklad na:

  • galériu obrázkov,
  • zoznam produktov,
  • väčší zoznam kariet,
  • admin výpisy, kde počet položiek nie je pevný.

Zhrnutie

CSS Grid začína tým, že na rodičovi nastavíme:

display: grid;

Potom cez grid-template-columns určujeme, ako majú vyzerať stĺpce.

Pevné stĺpce môžeme zapísať napríklad takto:

grid-template-columns: 200px 200px 200px;

Pružné stĺpce cez jednotku fr takto:

grid-template-columns: 1fr 1fr 1fr;

Kratší zápis je:

grid-template-columns: repeat(3, 1fr);

Ak chceme presne kontrolovať počet stĺpcov, použijeme repeat(3, 1fr) a pri menších obrazovkách media queries.

Ak chceme, aby sa počet stĺpcov počítal automaticky podľa dostupného miesta, použijeme:

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

Hlavný rozdiel je:

  • repeat(3, 1fr) znamená presne tri stĺpce,
  • repeat(auto-fit, minmax(220px, 1fr)) znamená automatický počet stĺpcov.

A keď si zapamätáme toto, Grid začne dávať oveľa väčší zmysel.

Súvisí to aj s tým, čo robím

Pozrite sa, s čím viem pomôcť

Ak riešite nový web, úpravy existujúcej stránky alebo audit SEO, GEO, prístupnosti a výkonu, pozrite si moje služby.

Jednoduchý web na mieru

Pre menšie prezentácie, firemné weby a stránky, ktoré majú byť prehľadné, rýchle a ľahko použiteľné.

Pozrieť službu

Zložitejší web na mieru a webová aplikácia

Keď už nestačí len jednoduchá prezentácia a web potrebuje vlastnú logiku, správu dát alebo rozšírené funkcie.

Pozrieť službu

SEO, GEO a prístupnostný audit

Kontrola technického stavu webu, viditeľnosti vo vyhľadávaní, prístupnosti a celkovej použiteľnosti.

Pozrieť službu

Úpravy a rozšírenie webu

Keď web už existuje, ale potrebuje opravy, vylepšenia, zrýchlenie alebo nové časti.

Pozrieť službu
← Späť na blog Pozrieť služby →