CSS -rutenettegenskaper | Forklart

CSS Grid er en layoutmodell som tillater en enkel arrangement av elementer som vises på et nettsted i forskjellige rader og kolonner. Denne modellen fungerer ved å dele opp en webside i seksjoner og justere elementer uten å måtte gå gjennom bryet med å bruke posisjonering og flyter. For å bruke denne modellen er det mange CSS-egenskaper tilgjengelig som vi har forklart dyptgående i dette innlegget.

CSS -rutenettegenskaper

Egenskaper tilknyttet nettoppsettmodulen er forklart nedenfor.

Nett-template-kolonneregenskaper

Som vi vet at et rutenettoppsett består av mange kolonner som har en viss størrelse, for å oppgi antall kolonner og bredder, brukes nettet-template-kolonneregenskap.

Syntaks

Nett-template-kolonner: Ingen | auto | Maks-innhold | Min-Content | lengde | Opprinnelig | arve;

Parametere forklart
ingen: Det er en standardverdi som genererer kolonner når det er nødvendig.

bil: Denne verdien evaluerer bredden på kolonner basert på beholderstørrelsen og elementene 'innholdsstørrelse som er til stede i en kolonne.

Maks-innhold: Det justerer kolonnebredden basert på det største elementet i kolonnen.

Min-Content: Det justerer kolonnebredden basert på det minste elementet i kolonnen.

lengde: Dette setter den gitte verdien som bredden på kolonnene.

Eksempel
Anta at du vil lage fire kolonner som hver har en lengde spesifisert i koden. Slik gjør du det.

Html

1
2
3
4
5
6
7
8

I koden ovenfor, for å lage en rutenettbeholder har vi laget et Div -element som har klasse "containerartikler" og for å plassere visse nettartikler inne i den beholderen har vi nestet åtte divelementer inne i nettbeholderen Div.

CSS

.container
Display: rutenett;
rutenett-template-kolonner: 70px 70px 70px auto;
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

Her setter vi visningen av DIV -elementet med klassen “Container” til rutenett for å gjøre det til en rutenettbeholder. Så lager vi fire kolonner med de tre første kolonnene som har en lengde på 70px, mens bredden på den siste kolonnen er satt til Auto. Hver kolonne har et gap på 5px og en sandbrun farge. Til slutt er polstringen av beholderen satt til 10px.

CSS

.elementer> div
Bakgrunnsfarge: Bisque;
polstring: 20px;
tekst-align: sentrum;
Font-størrelse: 35px;

Nå bruker vi noen grunnleggende CSS -egenskaper, vi styler varene våre som er til stede inne i beholderen.

Produksjon

Fire kolonner som har en viss bredde er opprettet.

GRid-Template-Rows-eiendom

Et rutenettsystem består også av visse rader, for å spesifisere antall rader sammen med høyden, brukes eiendommen.

Syntaks

Rutenett-Template-Rows: Ingen | auto | Maks-innhold | Min-Content | lengde | Opprinnelig | arve;

Parametere forklart
ingen: Det er en standardverdi som genererer rader når det er nødvendig.

bil: Denne verdien evaluerer høyden på radene basert på beholderstørrelsen og gjenstandenes innholdsstørrelse til stede på en rad.

Maks-innhold: Den justerer radhøyden basert på den største varen i raden.

Min-Content: Det justerer radhøyden basert på den minste varen i raden.

lengde: Dette setter den gitte verdien som høyden på radene.

Eksempel
Anta at du vil opprette to rader som har en spesifisert høyde, og følg koden nedenfor.

Html

.container
Display: rutenett;
rutenett-template-kolonner: Auto Auto Auto Auto;
rutenett-Template-Rows: 150px 250px;
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

I koden ovenfor har vi generert to rader. Den første raden har en høyde på 150px, i mellomtiden har den andre en høyde på 250px. Bortsett fra dette har vi også laget fire kolonner, hver med en bilbredde med et gap på 5px.

Produksjon

To rader som har en spesifisert høyde er opprettet.

GRID-Template-området eiendom

For å spesifisere navnet på områder i et rutenettsystem, brukes eiendommen. Det fungerer på en måte som du må navngi området ved hjelp av nettomegenskapen og deretter referere til navnet på denne egenskapen.

Syntaks

Rutenett-Template-områder: Ingen | gjenstandsnavn;

Parametere forklart
ingen: Det er en standardverdi som ikke spesifiserer noe navn for nettområdet.

gjenstandsnavn: Denne verdien representerer en sekvens av hvordan rader og kolonner i et rutenett vises.

Eksempel
Slik fungerer denne eiendommen.

CSS

.en
rutenettområdet: Itema;

.container
Display: rutenett;
nett-Template-områder: 'Itema itema ...';
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

I ovennevnte kode, ved hjelp av nettet om nettområdet, tildeler vi den første elementet i nettet et navn “itema” og henviser etterpå dette navnet i nettet-template-området-egenskapen som spesifiserer at det første elementet har navnet “itema” og vil ta plass på to søyler av fem.

Produksjon

Eiendommen fungerer som den skal.

GRid-Template-eiendom

Det er en kortfattet eiendom for egenskapene nevnt nedenfor.

1. rutenett-template-kolonner
2. rutenett-template-rader
3. Rutenett-Template-områder

Syntaks

rutenett-Template: Ingen | Rutenett-Template-Rows/Grid-Template-Column | rutenett-template-områder | Opprinnelig | arve;

Parametere forklart
ingen: Det er en standardverdi som ikke spesifiserer noen størrelse på rader og kolonner.

rutenett-template-kolonner: Det sier størrelsen på kolonnene.

rutenett-template-rader: Den definerer størrelsen på rader.

Rutenett-Template-områder: Det sier navnene på nettområder.

Eksempel
La oss tilordne antall og størrelse på rader og kolonner på en gang.

CSS

.container
Display: rutenett;
rutenett-Template: 200px/ Auto Auto Auto;
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

I koden ovenfor har det blitt spesifisert at det er to rader med rad 1 som har en høyde på 200px, og tre kolonner med en bilbredde for hver kolonne.

Produksjon

Eiendommen er implementert vellykket ..

GRID-ROW-start eiendom

Som navnet antyder, sier denne egenskapen i hvilken rad nettet vil begynne å vise.

Syntaks

nett-rad-start: auto | radlinje;

Parametere forklart
bil: Dette er en standardverdi som plasserer elementer i henhold til strømmen av nettet.

radlinje: Det heter det på hvilken rad varen vil begynne å vises.

Eksempel
Tenk på eksemplet nedenfor for å forstå arbeidet med denne eiendommen.

CSS

.container
Display: rutenett;
rutenett-template-kolonner: 200px 200px 200px;
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

.tre
nett-rad-start: 1;

I koden ovenfor er vi først og fremst spesifiserer tre kolonner hver med bredde på 200px og sier deretter at det tredje elementet vil begynne å vises i rad 1.

Produksjon

Punkt 3 er plassert i starten av rad 1.

GRID-kolonne-start eiendom

For å spesifisere i hvilken kolonne Grid-elementet vil begynne.

Syntaks

GRID-COLUMN-START: Auto | Span-n | kolonnelinje;

Parametere forklart
bil: Dette er en standardverdi som plasserer elementer i henhold til strømmen av nettet.

Span-n: Det sier antall kolonner som varen skal spenne.

kolonnelinje: Den definerer på hvilken kolonne varen som begynner å vises.

Eksempel
Anta at du vil plassere et spesifikt rutenettelement på en bestemt kolonne.

CSS

.en
rutenett-kolonne-start: 2;

Her bruker vi eiendommen til nettkolonnen og plasserer vare 1 i kolonne 2.

Produksjon

Punkt 1 har blitt plassert i kolonne 2.

GRID-ROW-END eiendom

Denne egenskapen heter det på hvilken rad nettet vil avslutte visning, eller antallet rader et rutenett -element vil spenne over.

Syntaks

GRID-ROW-END: Auto | Span-n | radlinje;

Parametere forklart
bil: Dette er en standardverdi som bare gjør at et element spenner over en enkelt rad.

Span-n: Det sier antall rader som varen skal spenne.

radlinje: Den definerer på hvilken rad varen vil avslutte visning.

Eksempel
Kontakt eksemplet nedenfor.

.en
rutenett-rad-end: Spenn 2;

I koden ovenfor lager vi vare 1 spenn over 2 rader ved å bruke den rutenett-rad-end-eiendommen.

Produksjon

Varen har blitt spredt over to rader.

GRID-kolonne-enden

Denne egenskapen heter det på hvilken kolonne nettet vil avslutte visning, eller tallkolonnene et rutenett -element vil spenne over.

Syntaks

GRID-kolonne-end: Auto | Span-n | kolonnelinje;

Parametere forklart
bil: Dette er en standardverdi som bare gjør at et element spenner over en enkelt kolonne.

Span-n: Det sier antall kolonner som varen skal spenne.

kolonnelinje: Den definerer på hvilken kolonne varen vil ende opp med å vise.

Eksempel
Her lager vi et elementspenn over to kolonner.

CSS

.en
rutenett-kolonne-end: Spenn 2;

Ovennevnte kode sier at punkt 1 vil spenne over to kolonner.

Produksjon

Punkt 1 spenner over to kolonner.

Nettstedets eiendom

Denne egenskapen brukes til å definere plasseringen og størrelsen på en rutenett eller gi et visst navn til et rutenettelement som deretter blir referert til av nettet-template-området eiendom. Videre er det en kortfattet eiendom for egenskapene nevnt nedenfor.

1. GRID-ROW-START
2. rutenett-rad-end
3. GRID-kolonne-start
4. rutenett-kolonne-end

Syntaks

Grid-Area: Row-Start / Column-Start / Row-End / Column-End | gjenstandsnavn;

Parametere forklart
GRID-ROW-START: Denne verdien sier hvor du kan begynne å vise et element på rad.

GRID-kolonne-start: Det sier hvor du skal begynne å vise et element i en kolonne.

rutenett-rad-end: Den beskriver hvor du skal slutte å vise gjenstander på rad, eller hvor mange rader som skal spenner.

rutenett-kolonne-end: Den beskriver hvor du kan slutte å vise elementer i en kolonne, eller hvor mange kolonner som skal spenner.

gjenstandsnavn: Denne verdien sier nettnavnet.

Eksempel
For å forstå arbeidet med denne egenskapen, bør du vurdere følgende eksempel.

.container
Display: rutenett;
rutenett-template-kolonner: Auto Auto Auto Auto;
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

.syv
rutenett: 1/2 / spenn 3 / spenn 2;

Ovennevnte kode sier at det er fire kolonner hver med en automatisk bredde. I mellomtiden blir det syvende elementet i nettet plassert i første rad, og andre kolonne, og spenner over 3 rader, og 2 kolonner.

Produksjon

Eiendommen ble implementert med hell.

GRID-AUTO-COLUMNS Eiendom

Denne egenskapen gir en viss størrelse til kolonnene i et rutenettoppsett.

Syntaks

GRID-AUTO-COLUMNS: Auto | Maks-innhold | Min-Content | lengde;

Parametere forklart
bil: Denne standardverdien evaluerer størrelsen på kolonnene basert på beholderstørrelsen.

Maks-innhold: Det justerer kolonnestørrelsen basert på det største elementet i kolonnen.

Min-Content: Det justerer kolonnestørrelsen basert på det minste elementet i kolonnen.

lengde: Denne verdien angir den gitte verdien som størrelsen på kolonnene.

Eksempel
Tenk på eksemplet nedenfor.

CSS

.en
rutenett: 1/1/2/2;

Før du bruker denne egenskapen, må du først tilordne steder til hver av nettpostene dine ved hjelp av nettet. For eksempel i koden over har vi spesifisert at punkt 1 vil bli plassert i starten av rad 1 og kolonne 1, og på slutten av rad 2, og kolonne 2. Nå er plasseringen av resten av varene tildelt i et lignende mønster.

CSS

.To
rutenett: 1/2/2/3;

.tre
rutenett: 1/3/2/4;

.fire
rutenett: 2/1 / 3/2;

.fem
rutenett: 2 / 2/3/3;

.seks
rutenett: 2 / 3/3/4;

Resten av nettet er også tildelt et sted ved hjelp av nettet eiendom.

CSS

.container
Display: rutenett;
rutenett-auto-kolonner: 200px;
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

Nå som bruker eiendommen som diskuteres, er størrelsen på kolonnene satt til 200px.

Produksjon

Eiendommen er implementert.

GRID-AUTO-ROWS Eiendom

Denne egenskapen gir en viss størrelse til radene med et rutenettoppsett.

Syntaks

GRID-AUTO-ROWS: Auto | Maks-innhold | Min-Content | lengde;

Parametere forklart
bil: Denne standardverdien evaluerer størrelsen på rader basert på beholderstørrelsen.

Maks-innhold: Det justerer radstørrelsen basert på det største elementet i raden.

Min-Content: Det justerer radstørrelsen basert på det minste elementet i raden.

lengde: Denne verdien angir den gitte verdien som størrelsen på radene.

Eksempel
La oss gi en viss størrelse til radene i containeren ved å bruke eiendommen som diskuteres.

CSS

.en nettområde: 1/1/2/2;
.to nettområde: 1/2/2/3;
.tre rutenett-området: 1/3/2/4;
.fire nettområde: 2/1 / 3/2;
.Fem nettområde: 2/2 / 3/3;
.seks nettområde: 2/3/3/4;
.container
Display: rutenett;
Rutenett-auto-rader: 200px;
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

Akkurat som egenskapen til netteta-kolonner må vi først tilordne lokasjoner til nettet ved hjelp av nettet på nettet og deretter bruke egenskapen Grid-Auto-Rows på størrelsen på rader er satt til 200px.

Produksjon

Hver rad har blitt tildelt en størrelse vellykket.

GRID-AUTO-FLOW Eiendom

Denne egenskapen håndterer hvordan automatisk posisjonerte nettposter vil bli plassert inne i beholderen.

Syntaks

rutenett-auto-flow: Row | kolonne | tett | rad tett | kolonnetett;

Parametere forklart
rad: Denne standardverdien plasserer elementer som fyller alle rader.

kolonne: Denne verdiene plasserer elementer som fyller alle kolonnene.

tett: Denne verdien fyller mellomrom i nettet ved å plassere gjenstander i disse områdene.

rad tett: Det plasserer gjenstander som fyller alle rader som ikke etterlater hull i nettet.

kolonne tett: Det plasserer gjenstander som fyller alle søyler som ikke etterlater hull i nettet.

Eksempel
Anta at du vil plassere rutenettet ditt som fyller hver kolonne.

CSS

.container
Display: rutenett;
rutenett-template-kolonner: Auto Auto Auto Auto;
Rutenett-Template-Rows: Auto Auto;
rutenett-auto-flow: kolonne;
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

I koden ovenfor, først og fremst har vi laget fire kolonner hver med en automatisk bredde, så genererte vi to rader hver med bilhøyde. Etterpå bruker vi grid-auto-flow-egenskapen for å plassere gjenstander som fyller hver kolonne.

Produksjon

Eiendommen fungerer som den skal.

GRID-ROW-eiendom

For å definere plasseringen og størrelsen på et rutenettelement, brukes gitter-radegenskapen. Dessuten er det en kortfattet eiendom for følgende egenskaper.

1. GRID-ROW-START
2. rutenett-rad-end

Syntaks

rutenett-rad: rutenett-rad-start / rutenett-rad-end;

Parametere forklart
GRID-ROW-START: Det heter det på hvilken rad varen vil begynne å vises.

rutenett-rad-end: Den definerer på hvilken rad varen vil ende opp med å vises.

Eksempel
Her er et eksempel på denne eiendommen.

CSS

.To
rutenett-rad: 1 / spenn 2;

I koden ovenfor har vi uttalt at punkt 2 vil bli plassert i rad 1 og spenner over 2 rader. I mellomtiden har rutenettet fire kolonner hver med en automatisk bredde.

Produksjon

Shorthand -eiendommen er implementert riktig.

GRID-kolonne eiendom

For å beskrive plasseringen og bredden på et rutenettelement, brukes grov-radegenskapen. Dessuten er det en kortvarig eiendom for egenskapene som er oppført her.

1. GRID-kolonne-start
2. rutenett-kolonne-end.

Syntaks

GRID-COLUMN: GRID-COLUMN-START / GRID-COLUMN-END;

Parametere forklart
GRID-kolonne-start: Det heter det på hvilken kolonne varen vil begynne å vises.

rutenett-kolonne-end: Den definerer på hvilken kolonne varen vil ende opp med å vises.

Eksempel
Her er et eksempel på denne eiendommen.

CSS

.en
rutenett: 2 / spenn 2;

Koden over sier at punkt 1 vil bli plassert i kolonne 2 og vil spenne over 2 kolonner.

Produksjon

Eiendommen fungerer som den skal.

Row-gap eiendom

Som navnet antyder, spesifiserer egenskapen.

Syntaks

ROW-GAP: Lengde | normal | Opprinnelig | arve;

Parametere forklart
lengde: Det sier gapet mellom rader.

normal: Det definerer et normalt gap mellom rader og er en standardverdi.

Eksempel
Kontakt eksemplet nedenfor for å forstå denne egenskapen.

CSS

.container
Display: rutenett;
rutenett-template-kolonner: Auto Auto Auto;
Row-gap: 60px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

I koden ovenfor har vi spesifisert at gapet mellom hver rad vil være 60px.

CSS

.elementer> div
Bakgrunnsfarge: Bisque;
Grense: 1px solid svart;
Polstring: 20px 0;
tekst-align: sentrum;
Font-størrelse: 35px;

Denne koden er den samme som ovenfor med den eneste forskjellen som for å demonstrere begrepet gap mellom rader ordentlig har vi lagt grenser til gjenstandene inne i nettet.

Produksjon

Gap mellom rader er implementert vellykket.

Kolonne-gap-eiendom

Denne egenskapen sier gapet mellom rutenettkolonner.

Syntaks

Kolonne-gap: Lengde | normal | Opprinnelig | arve;

Parametere forklart
lengde: Det sier gapet mellom kolonnene.

normal: Det definerer et normalt gap mellom kolonnene og er en standardverdi.

Eksempel
La oss legge til et spesifisert gap mellom kolonnene inne i et rutenett.

CSS

.container
Display: rutenett;
rutenett-template-kolonner: Auto Auto Auto;
kolonne-gap: 60px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

Her har vi lagt til et gap på 60px mellom hver kolonne.

Produksjon

Gap mellom kolonnene ble lagt til.

Gap -eiendom

For å spesifisere gapet mellom rader og kolonner på en gang, brukes gapegenskapen. Det er en kortfattet eiendom for følger.

1. rad-gap
2. kolonne-gap

Syntaks

GAP: ROW-GAP COLONN-GAP;

Parametere forklart
rad-gap: Det tilfører et gap mellom rader.

kolonne-gap: Det tilfører et gap mellom kolonnene.

Eksempel
La oss sette litt gap mellom rader og kolonner på en gang.

CSS

.container
Display: rutenett;
rutenett-template-kolonner: Auto Auto Auto;
Gap: 65px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

I koden ovenfor har vi spesifisert at det vil være et gap på 65px mellom hver rad, og hver kolonne.

Produksjon

Eiendommen fungerer som den skal.

Konklusjon

CSS Grid er en layoutmodell som tillater en enkel arrangement av elementer som vises på et nettsted i forskjellige rader og kolonner. Det er mange egenskaper assosiert med det, for eksempel, rutenett-template-kolonner, rutenett-template-rader, rutenett, rutenett, rutenett, osv. Hver av disse egenskapene tjener et annet formål som vi har forklart i dette innlegget sammen med relevante eksempler.