Introduktion til CSS Grid Layout Module

Det var engang tabeller, derefter margener og flyder, derefter flexbox og nu gitter: CSS styrede altid mod nye og bedre måder at lette det ældgamle job af kodende weblayouter. Det CSS Grid Layout Model kan oprette og opdatere layoutet langs to akser: vandret og lodret, påvirker både bredden og højden af elementer.

Gitterlayoutet er ikke afhængigt af placeringen af ​​elementer i markeringen, og derfor kan du blande placeringen af ​​elementer i markup uden at ændre layoutet. I gittermodellen er et gitterbeholderelement opdelt i gittersøjler og rækker (kollektivt kendt som gitterspor) ved gitter linjer. Lad os nu se, hvordan opret et eksempelgitter.

Browser support

Når du skriver denne artikel, understøttes CSS-netmodulet kun af den nyeste IE-browser og Edge. CSS-nettet er i forsøgsfasen i de andre større browsere, hvor du skal Aktivér supporten manuelt:

• Firefox: Tryk på Skift + F2, Indtast følgende kommando ind i GCLI-indtastningslinjen, der vises nederst i browseren: pref indstil layout.css.grid.enabled true.
• Chrome: Gennemse chrome: // flags URL og aktiver Eksperimentelle Web Platform funktioner.

Alle større browsersupport er sandsynligvis til kommer tidligt / midt i 2017.

Et eksempelgitter

Til drej et element ind i en gitterbeholder du kan bruge en af ​​disse tre Skærm ejendomme:

1. display: gitter; - elementet er konverteret til en blokgitterbeholder
2. display: inline-grid; - elementet er konverteres til en inline gitterbeholder
3. display: subgrid; - hvis elementet er et gitterelement, er det det konverteret til en undergrid der ignorerer gittermalet og gittergabegenskaberne

Ligesom et bord består af flere bordceller, er et net et bestående af flere gitterceller. Et gitterelement er tildelt til et sæt gitterceller det er kollektivt kendt som gitterområde.

Vi skal oprette et gitter med fem sektioner (gitterområder): top, bund, venstre, højre og center. HTML består af fem divs inde i en container div.

 
 
Top
 
Venstre
 
centrum
 
Ret
 
Bund
 
 

I CSS, den grid-skabelon-områder ejendom definerer et gitter med forskellige gitterområder. I sin værdi, en streng repræsenterer en gitterrække og hvert gyldigt navn inden for en streng repræsenterer en kolonne. Til Opret en tom gittercelle du skal bruge prik (.) Karakter inden for en række streng.

Det grid område navne skal henvises til af grid-område egenskaben af ​​de enkelte netartikler.

 .gitterbeholder bredde: 500px; højde: 500px; display: gitter; gitter-skabelon-områder: "top top top" "venstre center højre" "bund bund bund";  .grid-top grid-område: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-højre grid-område: højre;  .grid-center grid-area: center;  

Så denne kode opretter et gitter med tre rækker og søjler. Det top emne besidder et område, der spænder over tre kolonner i første række og bund vare spænder over tre kolonner i sidste række. Hver af de venstre, centrum og ret varer tager en kolonne i den midterste række.

Nu skal vi tildele dimensioner til disse rækker og kolonner. Det grid-skabelon-søjler og grid-template-rækker ejendomme Definer størrelsen af ​​gittersporet (række eller kolonne).

 .gitterbeholder bredde: 500px; højde: 500px; display: gitter; gitter-skabelon-områder: "top top top" "venstre center højre" "bund bund bund"; Gitter-skabelon-søjler: 100px auto 100px; gitter-skabelon-rækker: 50px auto 150px;  

Sådan ser vores CSS-gitter nu ud (med nogle flere stilarter):

Mellemrum mellem gitterelementer

Du kan tilføje tomt mellem kolonner og rækker ved brug af grid-søjle-kløften og grid-række-kløften, eller deres longhand ejendom grid-kløften.

 .gitterbeholder bredde: 500px; højde: 500px; display: gitter; gitter-skabelon-områder: "top top top" "venstre center højre" "bund bund bund"; Gitter-skabelon-søjler: 100px auto 100px; gitter-skabelon-rækker: 50px auto 150px; Gittergap: 5px 5px;  

Nedenfor kan du se, at grid-kløften ejendomme tilføjede huller mellem nettet genstande faktisk.

Juster gitterindhold og elementer

Det retfærdiggøre-indhold gitterbeholderens ejendom (.grid-beholder) justerer indholdet af nettet langs inlineaksen (vandret akse) og ejendommen tilslutter-indhold, justerer et gitters indhold langs blokaksen (lodret akse). Begge egenskaber kan have en af ​​disse værdier: Start, ende, centrum, rum-mellem, space-around og rum-jævnt.

Hvor det er relevant, sporet (række eller søjle) størrelse krymper for at passe til indholdet når den er justeret. Tag et kig på screenshots af nettet indhold justeret med forskellige værdier under.

retfærdiggør indhold: start;

retfærdiggør indhold: slut;

retfærdiggør indhold: center;

retfærdiggør indhold: mellemrum mellem;

retfærdiggør indhold: rum-rundt;

retfærdiggør indhold: plads-jævnt;

justeringsindhold: start;

justeringsindhold: ende;

justeringsindhold: center;

justeringsindhold: mellemrum mellem;

justeringsindhold: space-around;

justeringsindhold: plads-jævnt;

Både retfærdiggøre-indhold og tilslutter-indhold ejendomme juster hele indholdet i et gitter.

Til juster individuelle elementer inden for deres gitterområder, brug andet par justeringsegenskaber: retfærdiggøre-elementer og tilpasse poster. Begge kan have en af ​​disse værdier: Start, ende, centrum, baseline (juster elementer langs basisgitterlinjen i området) og strække (genstande fylder hele deres område).