Úvod do modulu CSS Grid Layout

Bolo to raz stoly, potom marží a plavákov, potom flexboxu a teraz mriežka: CSS vždy smeruje k novým a lepším spôsobom, ako uľahčiť vekovú prácu kódovanie rozloženia webu. CSS Grid Layout Model môže vytvoriť a aktualizovať rozloženie pozdĺž dvoch osí: horizontálne a vertikálne, ktoré ovplyvňujú šírku aj výšku prvkov.

Rozloženie mriežky nezávisí od polohy prvkov v označení, takže môžete zamiešajte umiestnenia prvkov pri značkovaní bez zmeny rozloženia. V modeli mriežky je prvok mriežky kontajnera rozdelené na stĺpce a riadky mriežky (spoločne známe ako mriežky) podľa mriežky. Teraz sa pozrime ako na to vytvorte vzorovú mriežku.

Podpora prehliadača

Od písania tohto článku je CSS Grid Module podporovaný iba najnovším prehliadačom IE a Edge. CSS Grid je v experimentálnej fáze v ostatných hlavných prehliadačoch, v ktorých musíte ručne podporovať podporu:

• Firefox: Stlačte Shift + F2, zadajte nasledujúci príkaz do vstupného panela GCLI, ktorý sa zobrazil v dolnej časti prehliadača: pref nastavenie layout.css.grid.enabled true.
• Chrome: Prejdite na chrome: // flags URL a povoliť Funkcie experimentálnej webovej platformy.

Celá veľká podpora prehliadača bude pravdepodobne prísť do začiatku / polovice roku 2017.

Vzorová mriežka

na otočte prvok do kontajnera mriežky môžeš použiť jeden z týchto troch zobraziť vlastnosti:

1. zobrazenie: mriežka; - prvok je premenený na kontajner s blokovou mriežkou
2. zobrazenie: inline-grid; - prvok je premenený na inline kontajner
3. zobrazenie: subgrid; - ak je elementom mriežka, je to premenené na čiastkovú mriežku ktorý ignoruje šablónu mriežky a vlastnosti mriežky

Rovnako ako tabuľka pozostáva z viacerých buniek tabuľky, je mriežka pozostáva z viacerých buniek siete. Položka mriežky je priradené k súboru buniek siete ktorý je kolektívne známy ako oblasť mriežky.

Budeme vytvárať mriežka s piatimi časťami (oblasti mriežky): hore, dole, doľava, doprava a stred. HTML sa skladá z päť divov v kontajneri div.

 
 
top
 
ľavý
 
centrum
 
Správny
 
dno
 
 

V CSS, grid-template-oblasti vlastnosť definuje mriežku s rôznymi oblasťami mriežky. V jeho hodnote, reťazec predstavuje riadok mriežky a každý platný názov v rámci reťazca predstavuje stĺpec. na vytvorte prázdnu bunku mriežky musíte použiť bodka (.) v rámci reťazca riadkov.

názvy oblastí mriežky sa odkazuje na grid-area vlastníctva jednotlivých položiek siete.

 .mriežka-kontajner šírka: 500px; výška: 500px; zobrazenie: mriežka; oblasti mriežky - šablóny: "top top top" "vľavo v strede vpravo" "dolné spodné dno";  .grid-top oblasť mriežky: hore;  .grid-bottom mriežka: spodná;  .grid-left mriežka: ľavá; . grid-right mriežka: pravá;  .grid-center mriežka: stred;  

Takže tento kód vytvára mriežka s troma riadkami a stĺpcami. top položka zaberá oblasť, ktorá sa rozprestiera tri stĺpce v prvom riadku a dno položka sa rozprestiera tri stĺpce v poslednom riadku. Každý z nich ľavý, centrum a správny položky jeden stĺpec v strede riadku.

Teraz musíme priradiť rozmery do týchto riadkov a stĺpcov. grid-Template-stĺpca a grid-Template-riadky vlastnosti definujte veľkosť mriežky (riadok alebo stĺpec).

 .mriežka-kontajner šírka: 500px; výška: 500px; zobrazenie: mriežka; oblasti mriežky - šablóny: "top top top" "vľavo v strede vpravo" "dolné spodné dno"; grid-template-columns: 100px auto 100px; mriežka-šablóna-riadky: 50px auto 150px;  

Takto vyzerá naša mriežka CSS (s niektorými ďalšími štýlmi):

Priestor medzi položkami mriežky

Môžete pridať prázdny priestor medzi stĺpcami a riadkami použitím mriežky stĺpec medzery a mriežky riadok medzery, alebo ich dlhý majetok grid-medzera.

 .mriežka-kontajner šírka: 500px; výška: 500px; zobrazenie: mriežka; oblasti mriežky - šablóny: "top top top" "vľavo v strede vpravo" "dolné spodné dno"; grid-template-columns: 100px auto 100px; mriežka-šablóna-riadky: 50px auto 150px; mriežka: 5px 5px;  

Nižšie vidíte, že grid-medzera Vlastnosť pridaných medzier medzi položkami siete skutočne.

Zarovnajte obsah a položky mriežky

odôvodňujú-content vlastnosť mriežkového kontajnera (.grid-kontajner) zosúlaďuje obsah mriežky pozdĺž inline osi (vodorovná os) a nehnuteľnosť ALIGN-obsah, zarovnáva obsah siete pozdĺž osi bloku (vertikálna os). Obidve vlastnosti môže mať jednu z týchto hodnôt: štart, koniec, centrum, Priestor medzi nimi, space-around a priestorovo rovnomerne.

Kde je to možné, veľkosť stopy (riadka alebo stĺpec) zmenšuje, aby sa prispôsobil obsahu pri vyrovnaní. Pozrite si screenshoty obsahu mriežky zosúladené s rôznymi hodnotami nižšie.

justify-content: štart;

justify-content: end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

ospravedlniť-obsah: priestorovo-rovnomerne;

zarovnanie-obsah: štart;

zarovnať-obsah: koniec;

zarovnať-obsah: centrum;

zarovnať obsah: priestor medzi;

zarovnať obsah: priestor okolo;

zarovnať obsah: priestorovo-rovnomerne;

Obaja odôvodňujú-content a ALIGN-obsah vlastnosti zarovnajte celý obsah v rámci mriežky.

na zarovnajte jednotlivé položky v rámci svojich oblastí, Použi iná dvojica vyrovnávacích vlastností: odôvodňujú-položiek a zarovnať-položiek. Obe môžu mať jednu z týchto hodnôt: štart, koniec, centrum, základné (zarovnajte položky pozdĺž základnej čiary oblasti) a natiahnuť (položky vyplniť celú oblasť).