Rutenettbeholder i CSS | Forklart

Et CSS -rutenett blir sett på som en layoutmodell som deler en webside i forskjellige rader og kolonner for å arrangere elementer. Disse radene og kolonnene hjelper til med å justere elementer lett i stedet for å bruke posisjons- og flyteegenskaper. Et rutenett posisjonerer elementer med hensyn til enten websiden eller andre elementer som er til stede på websiden. Den består av forskjellige komponenter som nettbeholdere og nettartikler. Vi vil imidlertid diskutere rutenettbeholder i dette innlegget.

Hva er en rutenettbeholder

En rutenettbeholder er et overordnet element som holder nettbaserte elementer plassert i rader, og kolonner. Med det formål å lage et element vedtok oppførselen til en rutenettbeholder, må du sette visningsegenskapen til enten nett- eller inline-rutenett.

Du kan gjøre et rutenettbeholder oppføre seg på en bestemt måte ved å bruke CSS -egenskapene knyttet til det. Disse egenskapene er diskutert nedenfor.

Rutenettbeholderegenskaper

Egenskaper koblet til en rutenettbeholder er beskrevet i detalj nedenfor.

Nett-template-kolonneregenskaper

En rutenettbeholder er delt inn i flere kolonner med bestemte størrelser, 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: Denne verdien angir den gitte verdien som bredden på kolonnene.

Eksempel
Anta at du vil lage fire kolonner som hver har en spesifisert lengde, og følg deretter koden nedenfor.

Html

1
2
3
4
5
6
7
8

For å lage et rutenettsystem har vi laget et DIV -element med klassen "Container -elementer" som fungerer som en rutenettbeholder, i mellomtiden er de andre Div -elementene som er nestet inni den, nettobjekter.

CSS

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

Her har vi opprettet fire kolonner som hver har bredden som er spesifisert i koden over og har et gap på 5px hver. I mellomtiden har diven fått tildelt en sandbrun farge og en polstring på 10px.

CSS

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

Vi styler nå bare nettproduktene våre ved hjelp av CSS -egenskaper.

Produksjon

Eiendommen fungerer som den skal.

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: Denne verdien angir den gitte verdien som høyden på radene.

Eksempel
Her skal vi demonstrere hvordan du lager rader som har en viss høyde.

Html

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

Her oppretter vi to rader som hver har høyden spesifisert i koden ovenfor. Vi har også laget fire kolonner som hver har en automatisk bredde.

Produksjon

Rader har blitt generert vellykket.

Justify-Content-eiendom

For å samkjøre hele rutenettet i en beholder horisontalt, brukes den rettferdige innholdsegenskapen. Husk at for at denne egenskapen skal fungere, skal den totale bredden på nettet være mindre enn beholderen.

Syntaks

Justify-Content: Start | slutt | sentrum | Space-mellom | rom-rundt | Space-Evenly | strekk | Opprinnelig | arve;

Parametere forklart
Start: Det plasserer nettet i starten av beholderen og er standardverdien.

slutt: Dette plasserer rutenettet på den siste av beholderen.

senter: Dette plasserer nettet midt i beholderen.

plass mellom: Det tilfører en like stor mengde plass mellom kolonnene.

rom-rundt: Det tilfører en lik plass rundt kolonner.

Space-Evenly: Dette tilfører et lik plass rundt og mellom kolonnene.

tøye ut: Det endrer størrelsen på elementene som lar nettet dekke hele bredden på beholderen.

Eksempel
Anta at du vil legge til plass mellom kolonnene inne i en rutenettbeholder.

CSS

.container
Display: rutenett;
Justify-Content: Space-mellom;
rutenett-template-kolonner: 40px 40px 40px;
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

I koden ovenfor, for å gjøre rutenettet mindre enn beholderen, lager vi tre kolonner på 40px hver og for å legge til mellomrom mellom disse kolonnene vi bruker rom-mellom-verdien til eiendommen Justify-Content.

Produksjon

Det er lagt til plass mellom kolonnene.

Eiendom i justering

For å justere hele rutenettet i en beholder vertikalt, brukes egenskapen. Husk at for at denne egenskapen skal fungere, skal den totale høyden på nettet være mindre enn beholderen.

Syntaks

Align-Content: Start | slutt | sentrum | Space-mellom | rom-rundt | Space-Evenly | strekk | Opprinnelig | arve;

Parametere forklart
start: Den plasserer radene i starten av beholderen og er standardverdien.

slutt: Dette plasserer radene på slutten av beholderen.

senter: Dette plasserer nettet midt i beholderen.

plass mellom: Det tilfører en like stor mengde plass mellom rader.

rom-rundt: Det tilfører en lik plass rundt rader.

Space-Evenly: Dette tilfører en lik plass rundt og mellom rader.

tøye ut: Det endrer størrelsen på varene som lar nettet dekke full høyde på beholderen.

Eksempel
Anta at du vil legge til plass mellom rader inne i en beholder.

CSS

.container
Display: rutenett;
Høyde: 350px;
Align-Content: Space-mellom;
rutenett-template-kolonner: Auto Auto Auto;
rutenett-gap: 5px;
Bakgrunnsfarge: Sandybrown;
polstring: 10px;

For å legge til plass mellom rader er vi først og fremst som gir en viss høyde til nettet og bruker deretter rom-mellom-verdien av egenskapen til justeringen av justeringen mellom rader mellom rader mellom rader mellom rader. Videre har vi laget tre kolonner hver med en bilbredde.

Produksjon

Det er lagt til plass mellom rader.

Konklusjon

En rutenettbeholder er et overordnet element som holder nettbaserte elementer plassert i rader, og kolonner. For å lage et element vedta atferden til en rutenettbeholder, vises det som enten rutenett eller inline-rutenett. En rutenettbeholder kan oppnå visse egenskaper gjennom bruk av visse CSS-egenskaper assosiert med den, slik som rettferdig-innhold, rutenett-templat-kolonner, justering av justeringer og rutenett-template-rader. Hver av disse egenskapene er forklart i artikkelen sammen med relevante eksempler.