Nettartikler i CSS | Forklart

Grid er en CSS -layoutmodell som lar brukerne ordne elementer som vises på et nettsted i forskjellige rader og kolonner. Denne modellen deler i utgangspunktet en webside i seksjoner og justerer elementer uten bruk av posisjon og flytende egenskaper. Den har to komponenter, en beholder og elementer. I dette innlegget vil vi imidlertid understreke hva et rutenett er og de forskjellige egenskapene knyttet til det.

Hva er et rutenettelement

Et rutenettelement er et barnelement som er til stede i en rutenettbeholder. Inne i en beholder som standard er det ett element til stede for hver kolonne, i hver rad. Imidlertid kan du spenne nettobjekter over mange rader og kolonner.

Det er mange egenskaper assosiert med et rutenett som definerer dets egenskaper. Vi har forklart disse egenskapene nedenfor.

GRID -gjenstandsegenskaper

Egenskaper koblet til et rutenettelement blir forklart i detalj nedenfor.

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
Anta at du vil plassere en bestemt vare i den første raden av beholderen her er hvordan det gjøres.

Html

1
2
3
4
5
6

For å generere en rutenettbeholder har vi laget et Div -element som har klasse "containerartikler" og for å plassere visse nettartikler inne i den beholderen har vi nestet seks divelementer inne i nettbeholderen Div hver som har en annen klasse.

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 tildeling av den større Div til et rutenett -skjerm for å gjøre det til en rutenettbeholder, så spesifiserer vi at det er tre kolonner i nettet som hver har en bredde på 200px og har et gap på 5px. Beholderen har også fått litt bakgrunnsfarge og polstring. Til slutt sier vi at det tredje elementet vises i begynnelsen av rad 1.

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

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 i hvilken kolonne varen vil begynne å vises.

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

CSS

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

.en
rutenett-kolonne-start: 2;

I koden ovenfor har vi laget fire kolonner hver med en 200px bredde og bruker deretter den nettkolonne-startegenskapen vi 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
La oss lage et element som spenner over to rader.

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

.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 avslutte visning.

Eksempel
La oss lage et element spenn 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.

GRID-ROW-eiendom

For å definere plasseringen og størrelsen på et rutenettelement, brukes grid-radegenskapen. Dessuten er det en kortfattet eiendom for egenskapene nevnt nedenfor.

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 avslutte vises.

Eksempel
Tenk på eksemplet nedenfor.

CSS

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

.To
rutenett-rad: 1 / spenn 2;

I koden ovenfor har vi uttalt at punkt 2 vil bli plassert i rad 1 og vil være spenn 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 som varen vil avslutte 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.

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: 2/1 / spenn 2 / spenn 3;

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

Produksjon

Eiendommen ble implementert med hell.

Konklusjon

Et rutenettelement er et barnelement som er til stede i en rutenettbeholder. Inne i en beholder som standard er det ett element til stede for hver kolonne, i hver rad. For å tilordne forskjellige egenskaper til et rutenett, er det mange egenskaper knyttet til det som rutenett, rutenett, rutenett, etc. Denne guiden lærer deg hva et rutenett er, og hvordan du kan få disse elementene til å oppføre seg på en bestemt måte ved å bruke de relaterte egenskapene sammen med passende eksempler.