Hva er rutenett?

Rutenettegenskapen er en kort egenskap for rutenett-mal-rader, rutenett-mal-kolonner, rutenett-mal-områder, rutenett-auto-rader, rutenett-auto-kolonner, rutenett-automatisk-strømning, rutenett-kolonne-gap , og rastereggegenskaper.

Nettstruktur

Rutenettegenskap gjør at elementene skal vises som matrise ⊞

 
 
 
 
 
 
 
 

I css

#container {
 skjerm: rutenett;
 }

I eksempel vises #container som et rutenett og underordnede elementer vises som rutenettceller eller elementer

Nettleserkompatibilitet

Det er en stor spenning at IE, Edge, Firefox støtter CSS-rutenettegenskap . Stort sett all nettleseren har vakker nettverksgrensesnitt i utviklerverktøy.

Rutenettlinjer

Rutenettlinjer er horisontale og vertikale linjer, de brukes til posisjonering. Posisjonsindeks kan være et helt tall (både negative og positive heltall).

Egenskaper → rutenett-kolonne-start, rutenett-kolonne-slutt, rutenett-rad-ende, rutenett-rad-ende.

Eksempelkode:

#grid> div: nth-child (2) {
 grid-column-start: 2;
 grid-column-end: 3;
 rutenett-rad-start: 2;
 rutenett-rad-ende: 3;
}

Element 2 vil starte på den andre vertikale linjen i 2 horisontale linjer, og elementet vil ende på 3 vertikale linjer og 3 vertikale linjer.

Rutenett

Rutenett

En rutenettcelle er et mellomrom mellom to tilstøtende vertikale rutenettlinjer og de to tilstøtende horisontale rutenettlinjene.

Rutenett

Rutenett spor

Et rutespor er et mellomrom mellom to tilstøtende rutenettlinjer. dvs. rad, kolonner.

Rutenettbane

Grid Area & Grid Gap

Et rutenettområde er gruppen av en eller flere celler.

Grid Gap er mellomrommet mellom radene og kolonnene. Det er den korthale egenskapen til gitter-rad-gapet og gitter-kolonne-gapet.

Rutenett for rad og rutenett

rutenett-rad er en kort egenskap for rutenett-start og rutenett-slutten.

rutenett-kolonne er en kort egenskap for rutenett-kolonne-start og rutenett-kolonne-slutt

Rutenett

rutenett-start → spesifiserer et rutenettets startposisjon i rekken

f.eks.grid-row-start: 2 → Elementet starter på den andre vertikale linjen

grid-row-end → spesifiserer rutenettets sluttposisjon i raden

f.eks.grid-row-end: 3 → Elementet slutter på den andre vertikale linjen

Grid-auto-flow

Den styrer hvordan auto-plasseringsalgoritmen fungerer. Som standard er verdien rad (Elementer plasseres i radbasis)

gitter-auto-flyt: rad;
gitter-auto-flyt: kolonne;
Rutenett for automatisk strømningskolonne og ruten for automatisk strømning av rutenettet

grid-auto-flow: rad tett → Bruker “tett” pakkelgoritme. Fyll ledig plass i rutenettet på radbasis.

rutenett-automatisk flyt: kolonnetett → Bruker "tett" pakkealgoritme. Fyll ledig plass i rutenettet på kolonnebasis

Eksplisitt rutenett og implisitt rutenett

Eksplisitte rutenett er rutenett opprettet av brukeren ved å bruke rutenett-mal-rad, rutenett-mal-kolonner

rutenett-mal-kolonner: gjenta (3, 100 px);
rutenett-mal-rader: 100px 100px;

Implisitt rutenett opprettes av nettleseren. Størrelse på det implisitte rutenettet kan endres ved hjelp av rutenett-auto-kolonner og rutenett-auto-rader-egenskapen.

rutenett-mal-kolonner: gjenta (3, 100 px);
rutenett-auto-rader: 100px;

Rutenett:

Vi kan bestille elementet etter malområdet.

Vi kan endre malområdet i mediesøk og vise ny rutenettstruktur.

se etter kodene for mer.

For nettet bruker vi stort sett alle oppstartsstrap-rutenettet. Bootstrap kan endre noe klassens navn i hver versjon (But Not Like Angular ), så vi må huske hvilken versjon som har hvilket klassnavn .

Ved å bruke CSS-rutenettegenskap, kan VI KAN (selv i IE ) enkelt vise elementene i rutenettvisning.

Tusen takk for at du leste! Hvis du likte det, kan du støtte ved å klappe og dele innlegget. Legg gjerne igjen en kommentar nedenfor.