CSS-nettoppsettmodellen lar oss lage en todimensjonal layout på et nettsted og justere nettets elementer i rader og kolonner. Hvis vi sammenligner CSS-nettoppsettmodellen med de tidligere layoutmodellene, vil vi følgelig bli kjent. CSS -nettoppsettmodellen gjør det mulig å designe websidene uten å bruke floats, posisjonering, inblocks osv.

I denne oppskrivningen vil vi dekke alle det grunnleggende i CSS-nettoppsettmodellen, og den vil bli organisert som følger:

• Hva er CSS -nettoppsettmodell?
• Forskjell mellom CSS -nett og CSS Flexbox.
• Hva er en rutenettbeholder?
• Hva er nettartikler?
• Praktisk implementering av CSS -nettoppsett.

Så la oss begynne!

Hva er CSS -nettoppsettmodell

Det er en 2-dimensjonal nettbasert layoutmodell med rader og kolonner. Disse radene og kolonnene kan holde rutenettelementer.

Hva er forskjell mellom nett- og flexbox -modellen

Nå må du lure på at både CSS Flexbox og CSS -rutenett er layoutmodeller, så hva er forskjellen mellom begge disse layoutmodellene?

Den undergitte tabellen vil hjelpe deg med å forstå grunnleggende om dette konseptet:

CSS -nettoppsett	CSS Flexbox
Det er en todimensjonal layoutmodell.	Det er en endimensjonal layoutmodell.
Rutenettoppsettet kan fungere på rader og kolonner samtidig.	Flexboxen kan fungere på enten rader eller kolonner på en gang.
Det hjelper til å skape mer kompliserte og organiserte oppsett.	Det hjelper å designe og lage responsive websider.
CSS-nettet er best egnet for større skalaoppsett.	CSS Flexbox-oppsett er best egnet for mindre skalaoppsett.
Oppsettet første tilnærming.	Innhold Første tilnærming.

Hva er en rutenettbeholder?

En rutenettbeholder er en boks/beholder som inneholder rutenett og kan plassere disse varene i radene og kolonnene. For å lage en rutenettbeholder, må vi bruke visningsegenskapen og angi verdien som enten inline-rutenett eller rutenett.

Tabellen nedenfor vil gi en kort guide for nettbeholderegenskapene:

Egenskaper	Beskrivelse
vise	bestemmer et element som et rutenett ved å spesifisere verdien til inline-rutenettet eller rutenettet.
GRID-Template-kolonner og rutenett-template-rader	Bestem størrelsen på kolonner og rader i en rutenettbeholder, og disse egenskapene kan ta en liste over rom-separerte verdier e.g. Sporstørrelse, linjavn.
Rutenett-Template-områder	Den bestemmer hvordan du viser rader og kolonner ved å bruke navngitte rutenettelementer.
rutenett-Template	Det er en kortvarig eiendom som brukes til å oppnå funksjonalitetene til tre egenskaper i.e. rutenett-template-kolonner, rutenett-template-rader og nettområder.
Row-gap & Column-Gap	Disse egenskapene bestemmer gapet mellom rutenettet og rutenettet henholdsvis.
GRID-kolonne-gap og nett-rad-gap	Spesifiser gapstørrelsen mellom forskjellige kolonner og rader i nettet.
GRID-GAP	Det er en kortvarig eiendom som brukes til å oppnå funksjonalitetene til to egenskaper i.e. GRID-kolonne-gap og nett-rad-gap
Justify-elementer	Det justerer gjenstandene i rutenettet langs radene/inline -aksen.
Align-elementer	Det justerer gjenstandene i rutenettet langs kolonnene/inline -aksen.
sted-elementer	Det er en shorthand-egenskap for egenskaper for justering av justeringer og rettferdiggjørelse som setter begge disse egenskapene i en enkelt erklæring.
Justify-Content	Det justerer rutenettet langs radene/inline -aksen
Align-innhold	Det justerer rutenettet langs kolonnene/blokkeringsaksen
stedsinnhold	Det er en kortvarig eiendom for justering av juster og rettferdiggjøring.
GRID-AUTO-kolonner	Den bestemmer standardstørrelsen for kolonnene ..
Rutenett-auto-rader	Den definerer standardstørrelsen for radene.
rutenett-auto-flow	Det bestemmer hvordan automatisk plasserte elementer legges til i CSS-rutenettet
Nett	Shorthand-eiendom for netttemplate-rader, rutenett-auto-rader, rutenett-template-kolonner, rutenett-auto-kolonner, nett-template-områder og rutenettet-auto-flow-egenskapene.

Praktisk implementering av CSS -nettoppsett

La oss nå implementere et par overbeskrevne egenskaper praktisk talt:

Eksempel 1

For det første vil vi implementere rutenettegenskapen og sette verdien som "Nett". Deretter bruker vi eiendommen til nett-template-kolonner og setter verdien “Auto” for alle tre kolonnene:

Rutenettoppsettmodell

Første vare
Andre vare
Tredje vare
Fjerde vare
Femte vare
Sjette vare

Vi får følgende utdata for ovennevnte kodebit:

Eksempel 2

La oss nå implementere egenskapen til nett-template-rader også for å spesifisere radens størrelse:

rutenett-Template-Rows: Auto 150px;

Ovennevnte utdrag viser at størrelsen på den første raden er “Auto” Og den andre radens størrelse er “150px”. Den resulterende utgangen vil se slik ut:

Vi kan observere plassen nederst på den andre raden, som validerer arbeidet med eiendommen til nett-template-rader.

Hva er nettartikler?

Elementene/elementene som er til stede i CSS -nettbeholderen er kjent som nettartikler eller barneelementer.

Tabellen gitt nedenfor illustrerer forskjellige egenskaper til nettartikler:

Egenskaper	Beskrivelse
GRID-kolonne-start og nett-rad-start	Disse egenskapene bestemmer plasseringen av rutenettelementer ved å spesifisere hvor du skal starte varen.
GRID-kolonne-end og rutenett-rad-end	Disse egenskapene bestemmer plasseringen av rutenettelementer ved å spesifisere hvor du skal avslutte rutenettet.
rutenett-kolonne	Det er en shorthand-eiendom for nettkolonne-start- og nettkolonne-end-egenskaper.
rutenett-rad	Det er en kortvarig eiendom for to eiendommer i.e. GRID-ROW-START OG GRID-ROW-END.
rutenett	Den spesifiserer navnet på nettet, eller det kan brukes til å oppnå funksjonalitetene til flere egenskaper i.e. GRID-ROW-START, GRID-COLUMN-START, GRID-ROW-END og GRID-COLUMN-END.
rettferdiggjør-seg selv	Det justerer et rutenettelement i en celle langs rad/inline -aksen.
Align-Self	Det justerer et rutenettelement i en celle langs kolonnen/blokkeringsaksen.
sted-selv	Det er en kortvarig eiendom for to eiendommer i.e. Align-Self og Justify-Self.

Eksempel 3

I dette eksemplet vil vi bruke egenskapen Align-Self i “Vareklasse”, Så all koden vil være den samme som spesifisert i de tidligere eksemplene, og den eneste forskjellen vil oppstå i vareklassen som vist nedenfor:

.vareklasse
Bakgrunnsfarge: Skyblue;
Grense: 2px solid svart;
polstring: 30px;
Font-størrelse: 30px;
tekst-align: sentrum;
Align-Self: Flex-end;

Vi setter verdien av den justerte egenskapen som flex-end, som vil justere linjene på slutten av beholderen:

Slik kan vi bruke alle egenskaper.

Konklusjon

CSS-nettoppsettmodellen lar oss lage en todimensjonal layout på et nettsted og justere nettets elementer i rader og kolonner. Den todimensjonale oppførselen til nettoppsettmodellen lar oss jobbe med rader og kolonner samtidig. CSS -nettoppsettmodellen kan ha ett overordnet element og flere barneelementer. Foreldreelementet kalles en rutenettbeholder, og barnelementet kalles et rutenettelement. Tallrike egenskaper kan brukes til å jobbe med nettoppsettmodeller, for eksempel display, rutenett, sted-selv, rettferdiggjøre elementer osv