Hvad er net ejendom?

Gitteregenskaben er en kort egenskab til gitter-skabelon-rækker, gitter-skabelon-søjler, gitter-skabelon-områder, gitter-auto-rækker, gitter-auto-søjler, gitter-auto-flow, gitter-søjle-spalte , og gitter række-gap-egenskaber.

Gitterstruktur

Ristegenskab gør elementerne til at vises som matrix ⊞

 
 
 
 
 
 
 
 

I css

#container {
 display: gitter;
 }

I eksempel vises #container som et gitter, og dets underordnede elementer vises som gitterceller eller elementer

Browserkompatibilitet

Det er en stor spænding, at IE, Edge, Firefox understøtter CSS-netejendom . Det meste af alle browsere har smukt grid UI i udviklerværktøjer.

Netlinjer

Netlinjer er vandrette og lodrette linjer, de bruges til positionering. Positioneringsindeks kan være et heltal (både negative og positive heltal).

Egenskaber → gitter-søjle-start, gitter-søjle-ende, gitter-række-ende, gitter-række-ende.

Prøvekode:

#grid> div: nth-child (2) {
 gitter-kolonne-start: 2;
 gitter-kolonne-ende: 3;
 gitter-række-start: 2;
 gitter-række-ende: 3;
}

Element 2 starter ved den anden lodrette linje i 2 vandrette linjer, og elementet slutter med 3 lodrette linjer og 3 lodrette linjer.

Netlinie

Gittercelle

En gittercelle er et mellemrum mellem to tilstødende lodrette gitterlinjer og de to tilstødende vandrette gitterlinjer.

Gittercelle

Netspor

Et gitterbane er et mellemrum mellem to tilstødende gitterlinjer. dvs. række, kolonner.

Gitterbane

Gitterområde og gittermangel

Et gitterområde er gruppen af ​​en eller flere celler.

Grid Gap er mellemrummet mellem rækkerne og kolonnerne. Det er den korthede egenskab ved net-række-kløften og gitter-kolonne-kløften.

Raster og raster kolonne

gitter-række er en kort egenskab til gitter-række-start og gitter-row-end.

gitter-søjle er en kort egenskab til gitter-søjle-start og gitter-søjle-ende

Gitterrække

gitter-række-start → angiver en rute-elements startposition i rækken

f.eks.grid-række-start: 2 → Element starter ved anden lodrette linje

gitter-række-ende → angiver en rute-elements slutposition i rækken

f.eks.grid-række-ende: 3 → Element slutter ved anden lodrette linje

Grid-auto-flow

Det styrer, hvordan den automatiske placeringsalgoritme fungerer. Som standard er værdien række (Varer placeres i rækkebasis)

grid-auto-flow: rækken;
grid-auto-flow: søjle;
Rutenet til automatisk strømning af ruten og raden til automatisk strømning af ruten

grid-auto-flow: række tæt → Bruger “tæt” pakningsalgoritme. Fyld den frie plads i gitteret på række basis.

grid-auto-flow: kolonne tæt → Bruger “tæt” pakningsalgoritme.Fyld det frie rum i gitteret på søjlebasis

Eksplicit rutenet og implicit rutenet

Eksplicitte gitter er gitter oprettet af bruger ved hjælp af gitter-skabelon-rækker, gitter-skabelon-kolonner

grid-template-kolonner: gentag (3, 100 px);
gitter-template-rækker: 100px 100px;

Implicit gitter oprettes af browseren. Størrelse på det implicitte gitter kan ændres ved hjælp af gitter-auto-kolonner og gitter-auto-rækker egenskab.

grid-template-kolonner: gentag (3, 100 px);
gitter-auto-rækker: 100px;

Netrækkefølge:

Vi kan bestille elementet efter egenskab for skabelonområde.

Vi kan ændre skabelonområdet i medieforespørgslen og vise ny gitterstruktur.

Tjek kodeapparatet for mere.

For nettet bruger vi stort set alle bootstrap-gittersystemet. Bootstrap kan muligvis ændre et klassenavn i hver version (Men Not Like Angular ), så vi er nødt til at huske, hvilken version der har hvilket klassnavn .

Ved at bruge CSS-gitterejendom, kan VI KAN (selv i IE ) nemt vise elementerne i gittervisning.

Mange tak for læsningen! Hvis du kunne lide det, skal du støtte ved at klappe og dele indlægget. Efterlad en kommentar leave nedenfor.