Uvod v modul za razporeditev omrežij CSS

Bilo je enkrat tabel, potem marže in plovci, potem flexbox in zdaj mreža: CSS je vedno usmerjal k novim in boljšim načinom, da bi olajšal starodavno delo kodiranje spletnih postavitev. The CSS Grid Layout Model lahko ustvarite in posodobite postavitev vzdolž dveh osi: vodoravno in navpično, vplivajo na širino in višino elementov.

Postavitev omrežja ni odvisna od položaja elementov v označbi, zato lahko premešajte umestitve elementov v označevanju brez spreminjanja postavitve. V mrežnem modelu je mrežni vsebnik element razdeli na stolpce in vrstice mreže (skupaj znani kot rešetke) do mrežne linije. Zdaj pa poglejmo, kako ustvarite vzorčno mrežo.

Podpora za brskalnik

Pri pisanju tega članka podpira moduli CSS Grid samo najnovejši brskalnik IE in Edge. Mreža CSS je v poskusni fazi v drugih glavnih brskalnikih, v katerih morate ročno omogočite podporo:

• Firefox: Pritisnite Shift + F2, vnesite naslednji ukaz v vnosno vrstico GCLI, ki je prikazana na dnu brskalnika: pref set layout.css.grid.enabled je res.
• Chrome: Prebrskajte zastavice chrome: // URL in omogoči Eksperimentalne funkcije spletne platforme.

Vse glavne podpore brskalnikov je verjetno zgodaj / sredi leta 2017.

Vzorec mreže

Za element v mrežni vsebnik lahko uporabiš enega od teh treh zaslon lastnosti:

1. prikaz: mreža; - element je pretvori v zaboj blok mreže
2. prikaz: inline-grid; - element je pretvori v vrstični vsebnik mreže
3. prikaz: subgrid; - če je element postavka mreže pretvorijo v podcesto , ki ne upošteva lastnosti mrežne predloge in reže

Tako kot tabela je sestavljena iz več celic tabele, je mreža sestavljena iz več mrežnih celic. Element mreže je dodeljena nizu celic mreže ki se skupaj imenuje omrežje.

Ustvarili bomo mreža s petimi odseki (mrežna območja): zgornji, spodnji, levi, desni in sredinski. HTML je sestavljen iz pet divov znotraj zabojnika div.

 
 
Na vrh
 
Levo
 
center
 
Prav
 
Spodaj
 
 

V CSS, omrežja-predloge nepremičnine določa mrežo z različnimi področji omrežja. V svoji vrednosti, niz predstavlja vrstico mreže in vsako veljavno ime znotraj niza predstavlja stolpec. Za ustvarite prazno celico mreže morate uporabiti pika (.) znak znotraj niza vrstic.

The imena omrežja se sklicuje na omrežje lastnost posameznih elementov mreže.

 .mrežni vsebnik širina: 500px; višina: 500px; prikaz: mreža; grid-template-areas: "top top top" "levo središče desno" "bottom bottom bottom";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  grid-right grid-area: desno;  .grid-center grid-area: center;  

Tako ustvarja ta koda mrežo s tremi vrsticami in stolpci. The na vrh element zavzema območje, ki se razteza čez tri stolpce v prvi vrstici in spodaj predmet se razteza čez trije stolpci v zadnji vrstici. Vsak od levo, center in prav elementov en stolpec v srednji vrstici.

Zdaj moramo dodeli dimenzije do teh vrstic in stolpcev. The grid-template-stolpci in grid-template-vrstice lastnosti določite velikost mrežne proge (vrstica ali stolpec).

 .mrežni vsebnik širina: 500px; višina: 500px; prikaz: mreža; grid-template-areas: "top top top" "levo središče desno" "bottom bottom bottom"; grid-template-stolpci: 100px auto 100px; grid-template-rows: 50px auto 150px;  

Tako zdaj izgleda naša mreža CSS (z nekaterimi dodatnimi slogi):

Razmik med mrežnimi elementi

Dodate lahko prazen prostor med stolpci in vrsticami uporabo grid-column-gap in vrzel med vrsticami, ali njihovo lastnino vrzel v mreži.

 .mrežni vsebnik širina: 500px; višina: 500px; prikaz: mreža; grid-template-areas: "top top top" "levo središče desno" "bottom bottom bottom"; grid-template-stolpci: 100px auto 100px; grid-template-rows: 50px auto 150px; vrzel v mreži: 5px 5px;  

Spodaj lahko vidite, da vrzel v mreži lastnine so dejansko dodale vrzeli med elementi omrežja.

Poravnajte vsebino in postavke omrežja

The utemeljiti vsebino lastnost mrežnega vsebnika (.zaboj za rešetke) poravna vsebino omrežja vzdolž inline osi (vodoravna os) in lastnino align-content, poravna vsebino mreže vzdolž osi bloka (navpična os). Obe lastnosti lahko ima eno od teh vrednosti: začetek, koncu, center, razmik, prostor okoli in prostorsko enakomerno.

Če je primerno, velikost tira (vrstice ali stolpca) skrči, da ustreza vsebini ko je poravnana. Oglejte si posnetke zaslona z vsebino omrežja usklajene z različnimi vrednostmi spodaj.

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: prostor-med;

justify-content: prostor-okoli;

Vsebina utemeljitve: prostorsko enakomerna;

vsebina poravnave: začetek;

align-content: end;

vsebina poravnave: center;

vsebina poravnave: presledek-med;

vsebina poravnave: prostor-okoli;

vsebina poravnave: enakomerno presledek;

Oba utemeljiti vsebino in align-content lastnosti poravnajte celotno vsebino v mreži.

Za poravnajte posamezne elemente znotraj njihovih mrežnih področij, uporabi drugi par lastnosti poravnave: utemeljiti in poravnajte. Oba lahko imata eno od teh vrednosti: začetek, koncu, center, izhodiščno vrednost (poravnajte elemente vzdolž osnovne linije omrežja) in raztezajo (postavke zapolnijo celotno območje).