9. diel - Grid systém od CSS

V minulej lekcii, Úvod do Bootstrap , sme si uviedli framework Bootstrap a ukázali jeho základné princípy.

Ako sme si už povedali v úvode do CSS grid systémov, grid systém je pre rozvrhnutie prvkov na našej stránke nevyhnutný. Vďaka CSS Grid layout môžeme úplne zmeniť spôsob, akým sme zvyknutí designovať webové stránky.

Úvod do CSS Grid layout

CSS sa pre štylizáciu webových stránok používalo vždy. Vedľa nepríliš funkčného rozloženia pomocou tabuľky tu boli priamo v CSS vlastnosti ako napr. display: inline-block; lenže išlo v podstate o hacky, a tak mnohokrát chýbala dôležitú funkcionalitu (napríklad vertikálne zarovnávanie na stred). Vylepšením sa potom stal Bootstrap. Ten je však určený prevažne pre jednoduchá rozloženie, nie pre zložitejšie dvojdimenzionálny rozloženie. A práve preto vznikol CSS Grid Layout, ktorý je dvojdimenzionálny a vďaka ktorému už žiadne rozloženie nie je problém.

CSS Grid funguje natívne vo všetkých prehliadačoch okrem prehliadača Internet Explorer, ktorý podporuje iba zastaranú syntax. Nemusíme sa teda báť tento systém používať:-)

Na konci tejto lekcie budeme vedieť vytvoriť potrebné takéto rozloženie:

Ako začať používať CSS Grid

Majme v našom HTML dokumente jednoduchý kontajner obsahujúci 6 elementov:

<div class="container">
      <div class="one">První element</div>
      <div class="two">Druhý element</div>
      <div class="three">Třetí element</div>
      <div class="four">Čtvrtý element</div>
      <div class="five">Pátý element</div>
      <div class="six">Šestý element</div>
    </div>

Teraz začneme kontajner stylovať v CSS. Najprv definujeme vlastnosť zobrazenie:

.container {
   display: grid;
}

Prípadne môžeme použiť aj display: inline-grid;. Všetky elementy vo vnútri kontajnera sú teraz grid položky, a preto môžeme aj u nich využívať vlastnosti gridu. Na prvý pohľad nie je rozloženie do gridu zrejmé, každý element však dostal svoje miesto vo mriežke:-) Pre znázornenie môžeme pridať triedam jednotlivých elementov vlastnosť background-color:

Teraz už prichádza na rad samotná úprava rozloženie. Pomocou vlastnosti grid-template-columns definujeme šírku jednotlivých stĺpcov. Šírku môžeme zadať buď klasicky pomocou pixelov (napr .: grid-template-columns: 200px 200px 200px;), alebo môžeme využiť tzv. fr jednotku, ktorá reprezentuje frakcii z dostupného priestoru v kontajneri. Ak teda napíšeme grid-template-columns: 1fr 1fr 1fr;, Rozdelíme tým kontajner na tri rovnako široké stĺpce. Funguje tu rovnaký princíp, aký už poznáme z Bootstrap: stránku možno rozdeliť do celkom 12 jednotiek, pričom pomer ich šírky môže byť ľubovoľný (napríklad 2-1-1 alebo 1-2-3). Dokonca môžeme miešať jednotku fr s jednotkou px (napr. 500px 1fr 2fr, kde sa šírka frakcií dopočíta zo zostávajúceho voľného miesta). Je však lepšie používať jednotku fr, pretože tá nám umožňuje responzívne rozloženie:

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

Naša stránka:

Veľkosť môžeme definovať aj pomocou funkcie repeat (), napríklad grid-template-columns: repeat(3, 1fr);, Čím docielime rovnaký výsledok.

Veľmi podobne funguje vlastnosť grid-template-rows. Nezabudnime, že ak obsah nášho kontajnera "pretečie" (tj. Máme viac ako 12 jednotiek), usporiadajú sa nám elementy do radov. Radám aj stĺpcom môžeme nastaviť automatickú veľkosť pomocou vlastnosti grid-auto-rows, resp. grid-auto-columns, čím je zarovnáme pekne do jednej mriežky.

Funkcia minmax()

Veľmi užitočná je pri vytváraní responzivního webdesignu pomocou CSS gridu funkcie minmax(). Pomocou tejto funkcie môžeme napríklad stanoviť minimálnu a maximálnu výšku radu:

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

stránka:

Ďalšie vlastnosti CSS Gridu

CSS Grid Layout ponúka celý rad vlastností, ktoré nám uľahčujú prácu s gridu a umožňujú takmer akejkoľvek rozloženie stránky.

Vlastnosť gap

Vlastnosť gap nastavuje medzeru (čiže Gutter) medzi jednotlivými radmi a stĺpci. Ďalej sa dá špecifikovať iba row-gap a column-gap. Pracujeme s ňou ako s akoukoľvek inou veľkosťou (tj. Uvádzame v jednotkách dĺžky alebo v%):

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

Naša stránka teraz vyzerá takto:

Grid-row a Grid-column

Vďaka týmto vlastnostiam, ktoré pridávame jednotlivým elementom vo vnútri kontajnera, môžeme umiestniť daný element na ľubovoľné miesto v gride. Využívame k tomu tzv. Grid lines. To sú ony "čiary", ktoré tvoria mriežku (grid). Najlepšie je to vidieť na obrázku:

Číslovanie grid lines sa vykonáva zľava doprava. Samotnú vlastnosť potom pridáme jednotlivým elementom. Všimnime si, že element sa zobrazí za druhou čiarou:

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

.one {
  grid-column: 2;
}

výsledok:

Možnosťou umiestnenia do gridu je veľa a rovnako tak môžeme použiť rôzne zápisy. Ak napíšeme triede .one vlastnosť grid-row: 1/3;, Zaberie element pozície v mriežke od prvej po tretiu čiaru (teda dve "okienka"). Takýto zápis je v podstate spojenie vlastností grid-row-start a grid-row-end. Podobne existujú aj vlastnosti grid-column-start a grid-column-end. Všetky tieto vlastnosti sa pridávajú jednotlivým elementom v kontajneri, nie celému kontajnera:

.one {
  grid-row-start: 1;
  grid-row-end: 3;
}

Teraz už poznáme tie najdôležitejšie základy pre prácu s Grid v CSS a zvládneme vytvoriť akúkoľvek mriežku:-)

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: rgb(0, 255, 255);
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background-color: rgba(255, 0, 0, 0.2);
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
  background-color: rgba(74, 238, 115, 0.589);
}
.four {
  grid-column: 3;
  grid-row: 3;
  background-color: rgba(255, 238, 2, 0.788);
}
.five {
  grid-column: 2;
  grid-row: 4;
  background-color: rgba(38, 0, 255, 0.2);
}
.six {
  grid-column: 3;
  grid-row: 4;
  background-color: rgba(153, 137, 137, 0.2);
}

A výsledok na našej stránke:

Ďalšie výhody CSS Gridu

CSS Grid má mnoho výhod a pri tvorbe stránok sa oplatí ho používať. Jednoduchá manipulácia s elementmi, možnosť ďalej stylovať elementy (zarovnanie textu a pod.) Ale tiež možnosť prekrývať elementy, radiť je alebo z elementov vytvárať kontajnery a docieliť tak takzvaného "nesting grid", čiže vložené mriežky. Ukážeme si to:

<div class="container">
   <div class="one">První element
      <div class="nested">a</div>
      <div class="nested">b</div>
      <div class="nested">c</div>
      <div class="nested">d</div>
   </div>
   ...
</div>

To samo o sebe však nestačí. Teraz musíme v našom CSS súbore pripísať pre triedu .one vlastnosť display: grid;. Predchádzajúca vlastnosti (teda umiestnenie tejto triedy v pôvodnej mriežke) nemeníme:

.one {
   grid-row-start: 1;
   grid-row-end: 3;
   display: grid;
   gap: 5px;
}

výsledok:

Ďalšie vlastnosti, ako napríklad ohraničenie alebo farbu pozadia, nastavujeme na triede .nested.

Z-index

Ako iste vieme, v CSS sa kód číta postupne odhora nadol. To znamená, že ak by sme v predchádzajúcom kúsku kódu napísali toto:

.one {
   grid-row-start: 1;
   grid-row-end: 3;
   display: grid;
   gap: 5px;
   grid-row-start: 2;
}

platiť bude posledný zadané informácie, teda grid-row-start: 2;. Prekrývanie jednotlivých vrstiev mriežky funguje rovnako. Ak máme 2 elementy, kedy ten druhý prekrýva časť prvého, uvidíme druhý element:

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

výsledok:

V praxi sa ale môže stať, že sa nám tento systém nehodí. Vďaka vlastnosti z-index môžeme ovplyvniť, v akom poradí sa jednotlivé elementy zobrazí. Stačí zapísať pomocou čísla ako vlastnosť na danej triede:

.one {
  grid-column: 1 / 3;
  grid-row: 1;
  z-index: 2;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

Naša stránka:

V dnešnom článku sme si ukázali základy práce s CSS grid rozložením. Najlepšie sa tento systém naučíme používať pri práci na skutočnom projektu.

V ďalšej lekcii, Responzívne tabuľky , si ukážeme rôzne spôsoby responzívne tabuliek.