Úvod do rozloženia mriežky CSS (s príkladmi)
CSS Grid ovládla svet webdizajnu. Je to naozaj super. Na internete existuje veľa návodov, blogov a článkov, ktoré sú skvelým zdrojom poznatkov.
Ale väčšina z nich vás naučí základy pomocou veľmi málo reálnych príkladov. V tejto príručke sa teda pozrieme na príklady, keď sa dozvieme.
Čo je to mriežka?
CSS Grid nám umožňuje písať lepšie rozloženia pomocou možností mriežok v prehliadači. Pred CSS Grid sme museli buď použiť vlastný prispôsobený mriežkový systém, alebo niečo ako Bootstrap.
Tieto ďalšie možnosti fungujú dobre, ale mriežka CSS odstraňuje bolesť z väčšiny vecí, ktorým sme v týchto riešeniach čelili.
Vďaka CSS Grid je vývoj jednoduchých a zložitých rozvrhnutí hračkou. V tomto blogu sa dozvieme niektoré základné terminológie a potom pokračujeme jednoduchým príkladom usporiadania.
Základné terminológie
Základné pojmy spojené s CSS Grid sú nasledujúce:
- Stĺpce
- Riadky
- Bunky
- Mriežky
- Žľab
Všetky pojmy sú vysvetlené v schéme vyššie. Tento príklad je mriežka stĺpca 3x2, čo znamená 3 stĺpce a 2 riadky.
Príklad rozloženia
Teraz, keď sú základné koncepty prekonané, použijeme tieto koncepty na vytvorenie príkladného usporiadania, ako je uvedené nižšie:
Ako vidíte, je tam hlavička a päta. Stredový riadok má potom 3 stĺpce s navigáciou v bočnom paneli prvého stĺpca vpravo a hlavnou oblasťou obsahu v strede (ktorá zaberá väčšinu riadku).
Ďalej je uvedený príklad kódu HTML pre tento príklad.
HEADER NAV CONTENTS ASIDE FOOTER Teraz, keď je HTML mimo našu cestu, zahrajme si CSS. V prvom rade to poďme trochu upraviť, aby náš HTML vyzeral ako vyššie. Tieto pravidlá CSS nie sú súčasťou mriežky CSS, takže ich môžete v prípade potreby vynechať.
.wrapper * { background: orange; display: flex; justify-content: center; align-items: center; margin-bottom: 1px; margin-right: 1px; }Ako vidíte, všetky predmety upravujem v obale. Nastavujem jeho farbu pozadia na orangea dávam bottoma rightmargins.nastavujem displayflexlen na zarovnanie položiek do mŕtveho stredu nastavením justify-contenta align-itemsna center.
Ďalej sa pozrime na časť CSS Grid.
.wrapper { display: grid; grid-template-columns: 1fr 5fr 2fr; grid-template-rows: 5fr 20fr 5fr; grid-gap: 10px; height: 720px; }Vo vyššie uvedenom kus kódu, ktorým sme displaysa grid- odtiaľ názov tejto témy. Takto prevádzame kontajner na grid.
Ďalej nastavíme stĺpce a riadky. Urobíme to pomocou grid-template-columnsa grid-template-rowsvlastností. grid-template-columnsnám umožňuje nastaviť počet stĺpcov s ich príslušnými hodnotami width. grid-template-rowsnám umožňuje nastaviť počet rowss ich príslušnými height.
V príklade vyššie sú 3 stĺpce, pričom prvý stĺpec zaberá 1 fraction, druhý stĺpec zaberá 5 fractiona tretí stĺpec 2 fractions. Jedna zlomková jednotka znamená „jeden kus z mnohých kusov, na ktoré ho delíme“ .
Ak sa pozriete na rovnaký príklad vyššie, použije sa rovnaký koncept rows. Existujú tri riadky a prvý riadok obsahuje headercelý riadok, ktorý vedie cez všetky tri stĺpce. Druhý riadok berie navigačnú jednotku, obsah a stranu, zatiaľ čo päta prechádza do tretieho a posledného riadku a zaberá všetky tri stĺpce.
To znamená, že prvý a posledný riadok zaberajú rovnakú výšku 5 fractions. A stredový rad zaberá zvyšok zvyšnej výšky.
Ďalej tiež vytvoríme žľab s veľkosťou 10px. To môžeme urobiť v CSS Gride pomocou grid-gapvlastnosti. Nakoniec nastavíme výšku našej obaľovacej nádoby.
Ak sa na to pozrieme v prehliadači, dostaneme výsledok, ktorý hľadáme:
Nastavíme teraz niektoré vlastnosti pre hlavičku a pätu, aby to vyzeralo viac, ako by sme chceli, aby to vyzeralo. Povieme hlavičke a päte, aby zabrali celé ich riadky.
Urobíme to pomocou grid-column-starta grid-column-end, napríklad:
header { grid-column-start: 1; grid-column-end: 4; } footer { grid-column-start: 1; grid-column-end: 4; }Ako vidíte, hlavička aj päta sa začínajú od grid line1 a končia sa číslom grid line4. To im umožňuje zaberať celé svoje riadky. To prinesie presný výstup, ktorý hľadáme, ako je uvedené nižšie:
Kompletný kód
CSS Grid .wrapper { display: grid; grid-template-columns: 1fr 5fr 2fr; grid-template-rows: 5fr 20fr 5fr; grid-gap: 10px; height: 720px; } header { grid-column-start: 1; grid-column-end: 4; } footer { grid-column-start: 1; grid-column-end: 4; } .wrapper * { background: orange; display: flex; justify-content: center; align-items: center; margin-bottom: 1px; margin-right: 1px; } HEADER NAV CONTENTS ASIDE FOOTER To je všetko pre tento článok. Môžete ma sledovať tu pre viac článkov. Ak sa vám páčil, nezabudnite ho zdieľať na sociálnych sieťach.
