CSS gir en nettoppsettmodell som hjelper oss med å dele en side i forskjellige regioner og lar oss justere elementene i rader og kolonner dynamisk. Denne modellen har to primære komponenter, i.e. rutenettbeholder og nettartikler. Spesifikt, hvis vi snakker om nettartiklene, er det mange egenskaper tilgjengelig som kan tjene forskjellige formål.

Denne oppskrivningen vil presentere en grundig oversikt over CSS-rutenettegenskaper, og den vil bli organisert som følger:

• Hva er nettartikler?
• GRID -gjenstander egenskaper i CSS
• Syntaks av CSS -rutenettegenskaper
• Hvordan du bruker nettetegenskaper

Så la oss begynne!

Hva er nettartikler?

Elementene i CSS Grid Container er kjent som nettartikler eller barneelementer.

GRID -gjenstander egenskaper i CSS

CSS gir mange egenskaper for å jobbe med CSS -nettartikler. 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 shorthand-eiendom som brukes til å oppnå funksjonalitetene til nett-rad-start og nett-rad-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.

Syntaks

Utdraget gitt nedenfor vil hjelpe deg med å forstå den grunnleggende syntaksen til nettetegenskaper:

Eiendomsnavn: verdi (er);

Eiendomsnavnet vil bli fulgt av tykktarmen “:” og deretter vil verdiene bli spesifisert på den andre siden av tykktarmen, og disse verdiene vil avgjøre hvilken funksjonalitet som skal utføres av rutenettet.

Hvordan du bruker nettetegenskaper

Per nå har vi en grunnleggende forståelse av egenskaper.

Eksempel

La oss anta at vi har to rader og fire kolonner, og vi har totalt seks rutenettartikler. Nå vil vi spesifisere de fire første elementene i første rad og de to siste elementene i andre rad:

Rutenettoppsettmodell

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

Fra ovennevnte utdrag kan vi observere at vi i Body -taggen har et overordnet element, og seks barneelementer. I hodemerket spesifiserte vi stilen for både foreldre- og barneelementer. Når vi ønsker å implementere en spesifikk stil på vareklassen5 og vareklasser6, så stylet vi dem hver for seg:

Output verifiserer arbeidet med nettkolonner og nett-radegenskaper.

Tilsvarende kan vi bruke de gjenværende nettetegenskapene, avhengig av våre behov.

Konklusjon

Elementene i CSS Grid Container er kjent som nettartikler eller barneelementer. CSS gir mange egenskaper for å jobbe med CSS-rutenettelementer som nett-kolonne-start, nett-rad-start spesifiserer varens startsted, Justify-selv, Align-Self-egenskaper justerer et rutenett i en celle langs raden/inline-aksen , henholdsvis kolonne/blokkakse. Tilsvarende er det mange flere CSS -rutenettegenskaper som kan brukes til å tjene forskjellige funksjonaliteter.