Uvod u CSS Grid Layout modul

Bilo je jednom stolovi, zatim margine i plovci, zatim flexbox a sada rešetka: CSS je uvijek usmjeravao prema novim i boljim načinima kako bi ublažio prastari posao kodiranje web izgleda. CSS model rasporeda mreže može stvoriti i ažurirati izgled duž dvije osi: vodoravno i okomito, utječu i na širinu i na visinu elemenata.

Raspored mreže ne ovisi o položaju elemenata u oznaci, stoga možete pomiješajte položaje elemenata u označavanju bez promjene izgleda. U mrežnom modelu, element kontejnera je podijeljeni u stupce i retke mreže (zajednički poznat kao mrežni tragovi) od rešetke. Sada ćemo vidjeti kako stvorite uzorak mreže.

Podrška za preglednik

Od pisanja ovog članka, CSS Grid modul podržava samo najnoviji IE preglednik i Edge. CSS Grid je u eksperimentalnoj fazi u drugim glavnim preglednicima u kojima morate ručno omogućite podršku:

• Firefox: Pritisnite Shift + F2, unesite sljedeću naredbu u traku za unos GCLI koja se pojavila na dnu preglednika: pref set layout.css.grid.enabled je istinit.
• Krom: Pregledajte chrome: // flags URL i omogućite Eksperimentalne značajke web-platforme.

Vjerojatno će svi glavni preglednici podržavati dolaze početkom / sredinom 2017.

Primjer mreže

Do pretvoriti element u rešetkasti spremnik možeš koristiti jedan od ova tri prikaz nekretnine:

1. prikaz: rešetka; - element je pretvorena u spremnik rešetke bloka
2. prikaz: inline-grid; - element je pretvorena u inline mrežni spremnik
3. prikaz: subgrid; - ako je element element mreže pretvorena u subgrid koja zanemaruje svojstva matrice mreže i raspora mreže

Kao što se tablica sastoji od više ćelija tablice, tako je i tablica koji se sastoji od više ćelija mreže. Stavka mreže je dodijeljen skupu stanica mreže koji se zajednički nazivaju područje mreže.

Stvorit ćemo rešetka s pet dijelova (mrežna područja): vrh, dno, lijevo, desno i središte. HTML se sastoji od pet divs unutar kontejnera div.

 
 
Vrh
 
Lijevo
 
centar
 
Pravo
 
Dno
 
 

U CSS-u, rešetke-predloška-područja svojstvo definira mrežu s različitim područjima mreže. U svojoj vrijednosti, niz predstavlja redak reda i svako valjano ime unutar niza predstavlja stupac. Do stvoriti praznu ćeliju mreže morate koristiti točka (.) unutar niza retka.

imena mreže na koje se upućuje Rešetka-područje svojstva pojedinih elemenata mreže.

 .rešetka-kontejner širina: 500px; visina: 500px; prikaz: rešetka; grid-template-područja: "top top top" "lijevo središte desno" "dno donjeg dna";  .grid-top grid-area: vrh;  .grid-bottom grid-area: bottom;  .grid-lijevo područje mreže: lijevo;  .grid-desno grid-area: desno;  .grid-centar grid-područje: centar;  

Tako ovaj kod stvara rešetka s tri reda i stupaca. vrh stavka zauzima područje koje se proteže preko tri stupca u prvom redu i dno stavka prelazi preko tri stupca u zadnjem retku. Svaka od lijevo, centar i pravo stavki jedan stupac u srednjem redu.

Sada moramo dodijeliti dimenzije u ove retke i stupce. mreža-template-kolone i rešetke predloška-redaka nekretnine odredite veličinu mrežne staze (redak ili stupac).

 .rešetka-kontejner širina: 500px; visina: 500px; prikaz: rešetka; grid-template-područja: "top top top" "lijevo središte desno" "dno donjeg dna"; grid-template-stupci: 100px auto 100px; grid-template-redovi: 50px auto 150px;  

Tako sada izgleda naša CSS mreža (s nekim dodatnim stilovima):

Razmak između elemenata mreže

Možete dodati prazan prostor između stupaca i redaka koristeći rešetke kolona raspor i Rešetka red proreza, ili njihova dugotrajna imovina Rešetka-jaz.

 .rešetka-kontejner širina: 500px; visina: 500px; prikaz: rešetka; grid-template-područja: "top top top" "lijevo središte desno" "dno donjeg dna"; grid-template-stupci: 100px auto 100px; grid-template-redovi: 50px auto 150px; raskorak u mreži: 5px 5px;  

Ispod možete vidjeti da Rešetka-jaz vlasništvo je dodalo praznine između stavki mreže.

Poravnajte sadržaj i stavke mreže

opravdavaju-sadržaj svojstvo rešetkastog kontejnera (.rešetke spremnik) poravnava sadržaj mreže duž inline osi (vodoravna os) i imovine poravnati-sadržaj, poravnava sadržaj mreže duž osi bloka (vertikalna os). Oba svojstva može imati jednu od tih vrijednosti: početak, kraj, centar, prostor između, prostor oko i Prostor-jednolično.

Ako je primjenjivo, veličina staze (retka ili stupca) smanjuje se kako bi odgovarao sadržaju kada je poravnat. Pogledajte screenshotove sadržaja mreže usklađen s različitim vrijednostima ispod.

justify-content: start;

justify-content: end;

justify-content: centar;

justify-content: prostor-između;

justify-content: prostor oko;

justify-content: prostorno ravnomjerno;

sadržaj poravnanja: početak;

sadržaj poravnanja: kraj;

align-content: centar;

sadržaj poravnanja: razmak između;

align-content: prostor oko;

align-content: prostorno ravnomjerno;

Oba opravdavaju-sadržaj i poravnati-sadržaj nekretnine poravnajte cijeli sadržaj unutar mreže.

Do poravnajte pojedine stavke unutar područja mreže, koristiti drugi par svojstava poravnanja: opravdati-stavke i poravnati-stavke. Oba mogu imati jednu od ovih vrijednosti: početak, kraj, centar, osnovica (poravnajte stavke duž osnovne linije mreže) i rastezanje (stavke popunjavaju cijelo područje).