Hva er CSS -rutenett?

Det er svært viktig å tildele passende posisjoner til elementer når du designer et nettsted. Det er forskjellige egenskaper og oppsett tilgjengelig i CSS som hjelper deg med å utføre denne oppgaven. En slik utforming er CSS -rutenettmodulen som ordner elementer i rader og kolonner. Fokuset for denne artikkelen er å understreke hva denne utformingen er og hvordan den kan brukes.

La oss komme i gang.

Hva er CSS -rutenett

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 å måtte gå gjennom bryet med å bruke posisjonering og flyter.

Et rutenett posisjonerer elementer med hensyn til enten websiden eller andre elementer som er til stede på websiden. Nedenfor har vi vist en visuell representasjon av et CSS -rutenettoppsett.

En nettoppsettmodell fungerer med alle nyeste nettlesere. Den består av to komponenter som er rutenettbeholder og nettartikler. Nedenfor har vi forklart dem i detalj.

Rutenettbeholder

En rutenettbeholder er et overordnet element som holder nettbaserte elementer plassert i rader, og kolonner. For å lage et element vedtar oppførselen til en rutenettbeholder sin visningsegenskap til enten rutenett eller inline-rutenett.

Nettartikler

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.

Her er en grafisk fremstilling av nettbeholderen, og nettartikler.

Som allerede nevnt deler et CSS -rutenett en webside i rader, og kolonner for å ordne elementer. Disse radene og kolonnene sammen med andre viktige nettterminologier er forklart nedenfor.

Kolonner i et rutenett

De vertikale linjene i et rutenett i hvilke elementer er plassert blir sett på som søyler i et rutenett. Et rutenettsystem kan ha minst to og høyst tolv eller flere kolonner.

Rader i et rutenett

De horisontale linjene i et rutenett som var plassert blir sett på som rader i et rutenett. Et rutenettsystem kan ha mange rader.

Hull i et rutenett

Området mellom hver rad, og kolonnen blir referert til som hull.

Linjer i et rutenett

Linjene mellom hver rad blir referert til som radlinjer, mens linjer mellom hver kolonne blir referert til som kolonnelinjer.

Det er mange egenskaper knyttet til CSS -rutenettet. Kontakt neste avsnitt for å lære om dem.

Rutenettegenskaper

Tabellen nedenfor gir en oversikt over nettoppsettegenskapene.

Egenskaper	Beskrivelse
rutenett-template-kolonner	Denne egenskapen oppgir antall og størrelse på kolonnene i et rutenettoppsett.
rutenett-template-rader	Den beskriver størrelsen på rader i et rutenettsystem.
Rutenett-Template-områder	Denne egenskapen tildeler navn til forskjellige elementer i et rutenett.
GRID-AUTO-kolonner	Den setter den første størrelsen på en kolonne.
Rutenett-auto-rader	Denne egenskapen setter den første størrelsen på en rad.
rutenett-auto-flow	Den sier hvordan elementer som er automatisk plassert er plassert i et rutenettsystem.
GRID-ROW-START	Denne eiendommen sier hvor du skal begynne en gjenstand i et rutenett.
GRID-kolonne-start	Den utfører den samme funksjonen som egenskapen ovenfor.
rutenett-rad-end
rutenett-kolonne-end	Den utfører den samme funksjonen som egenskapen ovenfor.
rutenett	Denne egenskapen brukes til å navngi et spesifikt nettområde.
rad-gap	Denne eiendommen oppgir et gap mellom rader.
kolonne-gap	Det sier gap mellom kolonnene.

La oss forstå nettsystemet videre ved hjelp av et eksempel.

Eksempel

I eksemplet som er demonstrert nedenfor har vi laget en enkel nettoppsett. Skissen av nettet vises nedenfor.

La oss starte kodingen.

Html

EN
B
C
D

Her har vi ganske enkelt nestet fire DIV -containere inne i en større div container. Hvert av DIV -elementet har fått tildelt noen klasse.

CSS

.container
Display: rutenett;
rutenett-gap: 5px;
rutenett-template-kolonner: 120px 120px 120px;

Ved å bruke klassen "container" tildelt den større div, viser vi den som et rutenett. Dessuten, tildelt et gap på 5px mellom rader og kolonner. Til slutt har vi opprettet tre kolonner med en størrelse på 120px hver ved hjelp av nettet-template-kolonneregenskaper.

CSS

.element
Bakgrunnsfarge: Sandybrown;
Farge: Hvit;
Border-Radius: 6px;
polstring: 25px;
Font-størrelse: 20px;

Nå styler vi ganske enkelt gjenstandene som er til stede i nettbeholderen ved hjelp av noen grunnleggende CSS -egenskaper.

CSS

.en
rutenett: 1/3; / * Angir plasseringen og størrelsen på varen i en kolonne */
rutenett-rad: 1; / * Angir plasseringen og størrelsen på varen innen en rad */

Regnetegenskapen setter start- og sluttposisjonen til nettet i en kolonne, i mellomtiden definerer gitter-radegenskapen plasseringen av et element på rad. For eksempel, i ovennevnte kodebit, vil punkt 1 begynne å vises i kolonne 1 og ende i kolonne 3, mens det vises i rad 1.

CSS

.To
rutenett: 3;
rutenett-rad: 1/3;

.tre
rutenett: 1;
rutenett-rad: 2;

.fire
rutenett: 2;
rutenett-rad: 2;

Ved hjelp av nettkolonnen, og rutenett-radegenskaper, er også resten av gjenstandene spesifisert.

Produksjon

En enkel nettoppsett er generert.

Konklusjon

En nettoppsettmodell 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 med hensyn til enten websiden eller andre elementer som er til stede på websiden. Den består av forskjellige elementer som er rutenettbeholder, og nettartikler. En rutenettbeholder er overordnet element, mens nettartikler er barnelementer. Denne oppskrivningen diskuterer alle nødvendige detaljer om nettoppsett sammen med grafiske representasjoner, og et passende eksempel.