Introduksjon til CSS Grid Layout Module

Det var en gang tabeller, deretter marginer og flyter, deretter flexbox og nå Nett: CSS styrte alltid mot nye og bedre måter å lette den gamle jobben på kodende weboppsett. De CSS Grid Layout Model kan opprette og oppdatere oppsettet langs to akser: horisontal og vertikal, påvirker både bredde og høyde av elementer.

Gridoppsettet er ikke avhengig av plasseringen av elementene i markeringen, derfor kan du Shuffle plasseringene av elementene i oppslag uten å endre oppsettet. I gittermodellen er et gitterbeholderelement delt inn i grid kolonner og rader (kollektivt kjent som rutenett spor) av rutenettlinjer. La oss nå se hvordan opprett et eksempelnett.

Nettleserstøtte

Når du skriver denne artikkelen, støttes CSS Grid Module bare av den nyeste IE-nettleseren og Edge. CSS-nettet er i eksperimentelt stadium i de andre store nettleserne du må Aktiver støtten manuelt:

• Firefox: Trykk Shift + F2, skriv inn følgende kommando inn i GCLI-inntastingslinjen som dukket opp nederst i nettleseren: pref sett layout.css.grid.enabled true.
• Chrome: Bla gjennom chrome: // flags URL og aktiver Eksperimentelle webplattformfunksjoner.

All større nettleserstøtte er sannsynlig komme tidlig i midten av 2017.

Et eksempelrutenett

Til Vri et element inn i en gitterbeholder du kan bruke en av disse tre vise eiendommer:

1. skjerm: grid; - elementet er konvertert til en blokkeringsbeholder
2. display: inline-grid; - elementet er konvertert til en inline grid container
3. display: subgrid; - hvis elementet er et rutenettelement, er det det konvertert til en subgrid som ignorerer gridmalen og gridgapegenskapene

Akkurat som et bord består av flere tabellceller, er et rutenett bestående av flere gitterceller. Et rutenett er tilordnet et sett av gitterceller det er kollektivt kjent som gridområde.

Vi skal lage et rutenett med fem seksjoner (rutenett): topp, bunn, venstre, høyre og midtpunkt. HTML består av fem divs inne i en container div.

 
 
Topp
 
Venstre
 
senter
 
Ikke sant
 
Bunn
 
 

I CSS, den grid-template-områder eiendom definerer et rutenett med forskjellige rutenett. I sin verdi, en streng representerer en rutenett og hvert gyldig navn i en streng representerer en kolonne. Til opprett en tom gridcelle du må bruke punktum (.) karakter innenfor en rad streng.

De rutenettnavn skal refereres av gitter-området Egenskapen til de enkelte rutenettene.

 .gitterbeholder bredde: 500px; høyde: 500px; skjerm: grid; grid-template-områder: "top top top" "venstre midt høyre" "bottom bottom bottom";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-right grid-area: right;  .grid-center grid-area: center;  

Så denne koden oppretter et rutenett med tre rader og kolonner. De topp elementet okkuperer et område som strekker seg over tre kolonner i første rad og bunn vare spenner over tre kolonner i siste rad. Hver av venstre, senter og Ikke sant elementer tar en kolonne i den midterste raden.

Nå må vi tilordne dimensjoner til disse radene og kolonnene. De gitter-mal-kolonner og gitter-mal-rader eiendommer definer størrelsen på rutenettet (rad eller kolonne).

 .gitterbeholder bredde: 500px; høyde: 500px; skjerm: grid; grid-template-områder: "top top top" "venstre midt høyre" "bottom bottom bottom"; grid-template-kolonner: 100px auto 100px; rutenett-mal-rader: 50px auto 150px;  

Slik ser CSS-nettet vårt ut (med noen flere stilarter):

Mellomrom mellom rutenettene

Du kan legge til tomt mellomrom mellom kolonner og rader ved hjelp av gitter-kolonne-gap og gitter-rad-gap, eller deres longhand eiendom gitter-gap.

 .gitterbeholder bredde: 500px; høyde: 500px; skjerm: grid; grid-template-områder: "top top top" "venstre midt høyre" "bottom bottom bottom"; grid-template-kolonner: 100px auto 100px; rutenett-mal-rader: 50px auto 150px; grid-gap: 5px 5px;  

Nedenfor kan du se at gitter-gap eiendom lagt til mellomrom mellom rutenettene faktisk.

Juster rutenettinnhold og -elementer

De rettferdig-innhold eiendommen til rutenettbeholderen (.gitter-container) justerer innholdet i rutenettet langs inlineaksen (horisontal akse) og eiendommen juster-innhold, justerer et rutenettets innhold langs blokkaksen (vertikal akse). Begge eiendommene kan ha en av disse verdiene: start, slutt, senter, plass mellom-, plass rundt og plass jevnt.

Hvor det er aktuelt, sporet (rad eller kolonne) størrelse krymper for å passe innholdet når justert. Ta en titt på skjermbildene av nettinnholdet justert med forskjellige verdier under.

begrunn-innhold: start;

begrunn-innhold: slutt;

begrunn-innhold: center;

begrunn-innhold: mellomrom mellom;

begrunn-innhold: space-around;

begrunn-innhold: plass-jevnt;

justeringsinnhold: start;

justeringsinnhold: slutt;

justeringsinnhold: center;

justeringsinnhold: mellomrom mellom;

justeringsinnhold: space-around;

justeringsinnhold: plass-jevnt;

Begge rettferdig-innhold og juster-innhold eiendommer juster hele innholdet i et rutenett.

Til juster individuelle elementer innenfor deres rutenett, bruke andre par justeringsegenskaper: rettferdig-elementer og justere elementer. Begge kan ha en av disse verdiene: start, slutt, senter, grunnlinje (juster elementer langs grunnlinjen i området) og tøye ut (elementer fyller hele området).