Ú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:

  1. Stĺpce
  2. Riadky
  3. Bunky
  4. Mriežky
  5. Žľ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.