Introduktion till CSS Grid Layout Module

Det var en gång tabeller, sedan marginaler och flottor, sedan Flexbox och nu rutnät: CSS styrde alltid mot nya och bättre sätt att underlätta det gamla jobbet kodande webblayouter. De CSS Grid Layout Model kan skapa och uppdatera layouten längs två axlar: horisontell och vertikal, som påverkar både bredden och höjden av element.

Gridlayouten beror inte på placeringen av element i markeringen, så kan du Blanda placeringarna av element i markup utan att ändra layouten. I rutmodellen är ett gallerbehållarelement delad i rutnät kolumner och rader (gemensamt känd som rutnät) av rutnät. Nu ska vi se hur skapa ett provruten.

Webbläsarstöd

När du skriver den här artikeln stöds CSS Grid Module bara av den senaste IE-webbläsaren och Edge. CSS-nätet är i försöksstadiet i de andra stora webbläsarna där du måste aktivera stödet manuellt:

• Firefox: Tryck på Skift + F2, skriv följande kommando in i GCLI-inmatningsfältet som visas längst ned i webbläsaren: pref ställa in layout.css.grid.enabled true.
• Krom: Bläddra i chrome: // flags URL och aktivera Experimentella webbplatskomponenter.

Alla större webbläsare stöd kommer sannolikt att komma i början av mitten av 2017.

Ett provnät

Till vänd ett element till en rutnät du kan använda en av dessa tre visa egenskaper:

1. display: rutnät; - elementet är konverteras till en blockgridbehållare
2. display: inline-grid; - elementet är konverteras till en inline gridbehållare
3. display: subgrid; - om elementet är ett rutnät är det omvandlas till en subgrid som ignorerar egenskaperna för rutnät och nätgap

Precis som ett bord består av flera tabellceller, är ett rutnät bestående av flera nätceller. Ett rutnät är tilldelas en uppsättning av nätceller det är kollektivt känt som rutnätområde.

Vi ska skapa ett rutnät med fem sektioner (rutnät): topp, botten, vänster, höger och centrum. HTML består av fem divs inne i en container div.

 
 
Topp
 
Vänster
 
Centrum
 
Höger
 
Botten
 
 

I CSS, den grid-template-områden fast egendom definierar ett rutnät med olika rutnätområden. I sitt värde, en sträng representerar en radrad och varje giltigt namn inom en sträng representerar en kolumn. Till skapa en tom rutcell du måste använda punkt (.) karaktär inom en radsträng.

De rutnätsnamn ska hänvisas av grid-område egenskapen hos de enskilda rutnätet.

 .rutnät bredd: 500px; höjd: 500px; display: rutnät; galler-mall-områden: "top top top" "left center right" "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å skapar den här koden ett rutnät med tre rader och kolumner. De topp objektet upptar ett område som sträcker sig över tre kolumner i första raden och den botten objektet spänner över tre kolumner i sista raden. Var och en av vänster, Centrum och höger objekt tar en kolumn i mittenrad.

Nu behöver vi tilldela dimensioner till dessa rader och kolumner. De grid-template-kolonner och grid-template-rader egenskaper definiera storleken på gallrets spår (rad eller kolumn).

 .rutnät bredd: 500px; höjd: 500px; display: rutnät; galler-mall-områden: "top top top" "left center right" "bottom bottom bottom"; gallermall-kolumner: 100px auto 100px; raster-mall-rader: 50px auto 150px;  

Så här ser vårt CSS-galler ut nu (med några ytterligare stilar):

Mellanslag mellan rutnät

Du kan lägga till tomt mellanslag mellan kolumner och rader använder sig av grid-kolonn-gap och grid-rad-spalt, eller deras longhand egendom grid-gap.

 .rutnät bredd: 500px; höjd: 500px; display: rutnät; galler-mall-områden: "top top top" "left center right" "bottom bottom bottom"; gallermall-kolumner: 100px auto 100px; raster-mall-rader: 50px auto 150px; gallergap: 5px 5px;  

Nedan kan du se att grid-gap egendom lagt till mellanrum mellan rutnätet faktiskt.

Justera nätinnehåll och objekt

De motivera-innehåll grindbehållarens egendom (.grid-behållare) justerar nätets innehåll längs inlineaxeln (horisontell axel) och fastigheten rikta-innehåll, justerar ett rutnät innehåll längs blockaxeln (vertikal axel). Båda egenskaperna kan ha en av dessa värden: Start, slutet, Centrum, rymd-mellan, space-around och space-jämnt.

I tillämpliga fall spårets (rad eller kolumn) storlek krymper för att passa innehållet när de är justerade. Ta en titt på skärmdumparna för nätinnehållet inriktad på olika värden Nedan.

motivera innehåll: starta;

rättfärdiga innehåll: slutet;

rättfärdiga innehåll: center;

rättfärdiga innehåll: mellanslag mellan;

motivera innehåll: space-around;

rättfärdiga innehåll: space-jämnt;

justeringsinnehåll: start;

justeringsinnehåll: slutet;

justeringsinnehåll: center;

justeringsinnehåll: mellanslag mellan;

justeringsinnehåll: space-around;

align-content: space-jämnt;

Både motivera-innehåll och rikta-innehåll egenskaper anpassa hela innehållet i ett rutnät.

Till anpassa enskilda objekt inom sina nätområden, Använd andra par anpassningsegenskaper: motivera-objekt och ALIGN-objekt. Båda kan ha ett av dessa värde: Start, slutet, Centrum, baslinje (justera objekt längs grunderna i området) och sträcka (föremål fylla hela sitt område).