Rutenettbeholderegenskaper i CSS | Forklart

CSS gir en nettoppsettmodell som gjør det mulig å lage en todimensjonal layout på et nettsted. Den todimensjonale oppførselen til CSS-rutenettet muliggjør justering av nettets elementer i rader og kolonner. CSS -nettbeholderegenskap.

Denne artikkelen vil gi en omfattende guide for nettbeholderen, og i denne forbindelse vil den dekke følgende grunnleggende begreper for nettbeholder:

• Hva er en rutenettbeholder i CSS
• Displayegenskapen
• Rutenettbeholderegenskaper i CSS
• Hvordan bruke nettbeholderegenskaper i CSS

Så la oss begynne!

Hva er en rutenettbeholder?

En rutenettbeholder er en boks/beholder som inneholder rutenett og kan plassere disse varene i radene og kolonnene.

Displayegenskapen

For å lage en rutenettbeholder, må vi bruke visningsegenskapen og angi verdien som enten inline-rutenett eller rutenett. Utdraget nedenfor viser den grunnleggende syntaks for displayegenskap:

skjerm: verdi;

Eksempel 1

I det undergitte kodebiten vil vi lage en rutenettbeholder, og innen container vil vi erklære fem barneelementer:

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

De respektive stilklassene for nettbeholdere og rutenett vil være slik:

Ovennevnte kodebit vil vise følgende utdata:

Utgangen verifiserer at både nettbeholder- og rutenettelementer er stylet i henhold til deres respektive stilklasser.

Rutenettbeholderegenskaper i CSS

Tabellen gitt nedenfor vil gi en kort guide for nettbeholderegenskapene:

Egenskaper	Beskrivelse
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. Tack-size, linjenavn.
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	Disse egenskapene brukes til å spesifisere størrelsen på gapet mellom nettkolonnene og rutenettet rader.
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 justeringer og rettferdiggjørelser, som setter seg både 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	Det 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	Det er en kortvarig eiendom for flere nettegenskaper (i.e. rutenett-template-rader, rutenett-template-kolonner, rutenett-template-områder, rutenett-auto-rader, rutenett-auto-kolonner og rutenettet-auto-flow).

Hvordan bruke nettbeholderegenskaper i CSS

Nå vil vi praktisk talt implementere noen av de ovenfor beskrevne egenskapene for en dyp forståelse.

GRID-Template-Columns & GRID-Template-Rows Properties

Disse egenskapene kan ta flere romseparerte verdier som bil, prosentandel osv.

La oss endre eksempel1 litt; I eksemplet nedenfor vil all koden forbli den samme bortsett fra eiendommen.

Eksempel 2

I dette eksemplet vil vi legge til en egenskap av nett-template-kolonner for å spesifisere kolonnestørrelsen etter vårt valg:

rutenett-template-kolonner: 1FR Auto Auto;

Fra ovennevnte utdrag kan vi observere at den første kolonnens bredde er "1FR," og bredden på de resterende to kolonnene er “Auto”.

Derfor vil den første kolonnens bredde være forskjellig fra de resterende to kolonnene:

Tilsvarende kan vi bruke rutenett-template-rader Eiendom for å spesifisere størrelsen på rader.

Egenskapen til justeringsinnhold

For å justere rutenettet langs vertikalt/blokkeringsaksen eller kolonnene, kan vi bruke egenskapen til justeringsinnhold, og det kan ta forskjellige verdier for å utføre forskjellige funksjonaliteter som for eksempel “Center”, “Start”, “End”, “Space-Evenly”, etc.

Eksempel 3

I dette eksemplet vil vi bruke egenskapen til justering av justeringer og sette verdien som "slutt" for å stille inn/justere radene på slutten av beholderen. Kodebiten nedenfor viser koden for beholderklassen mens vareklassen og HTML-koden vil forbli den samme som i tidligere eksempler:

.Container-klasse
Display: rutenett;
rutenett-template-kolonner: Auto Auto Auto;
Høyde: 300px;
Align-Content: End;
bakgrunnsfarge: grønn;
polstring: 10px;

Egenskapen til justeringsinnhold vil ha følgende innvirkning når verdien er satt som "slutt":

Utgangen autentiserer arbeidet med egenskap.

Tilsvarende kan vi implementere resten av nettbeholderegenskapene for å benytte de forskjellige funksjonalitetene, avhengig av vårt ønske og nødvendigheter.

Konklusjon

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. Dessuten er et bredt spekter av rutenettegenskaper tilgjengelig i CSS for å designe websidene, for eksempel rettferdiggjøring av Justify-Item. Denne oppskrivningen forklarte ulike aspekter ved nettbeholderegenskaper og implementerte dem praktisk.