En guide til CSS-rutenett: Mestring av oppsett med rutenettegenskaper

Plassering av elementer på en nettside kan være svært komplisert når du arbeider med komplekse layouter. Det er her CSS-nettet kommer godt med. Det er et layoutsystem designet for å forenkle prosessen med å lage komplekse layouter.

Hvordan hjelper det deg? I motsetning til tradisjonelle layoutmetoder som bare lar deg plassere elementer i enten rader eller kolonner, tilbyr CSS-rutenettet deg det beste fra begge verdener – en 2D-tilnærming som bruker rader og kolonner.

Rutenettbeholdere og gjenstander

Du kan bruke CSS-rutenettegenskaper på to hovedtyper elementer: overordnet og underordnet. Når du setter visningsegenskapen til "rutenett" for et overordnet element, transformerer det elementet til en rutenettbeholder. Ethvert underordnet element i denne rutenettbeholderen blir et rutenettelement som arver de brukte rutenettegenskapene.

Slik er det representert:

Et rutenettelement kan også bli en rutenettbeholder. Du kan nå referere til oppsettet som et nestet rutenett – et rutenett i et rutenett. Hovedgitterbeholderen blir nå referert til som det ytre rutenettet, mens den gjenstandsvendte rutenettbeholderen blir et indre rutenett.

Hvert av disse rutenettene fungerer uavhengig av det andre, noe som betyr at egenskapene som er satt for et indre rutenett, ikke påvirker utformingen av det ytre rutenettet, og omvendt.

Slik ser det ut:

Å mestre forholdet mellom rutenettbeholdere og gjenstander er avgjørende for bygge todimensjonale layouter effektivt.

Husk at det er rutenettegenskaper for rutenettcontainere, mens andre er for rutenettelementer.

Rutenettlinjer og spor

Før du begynner å bruke CSS-nettverket, er det to nøkkelbegreper du bør være kjent med:

1. Rutenettlinjer: Rutenettlinjer refererer til de horisontale og vertikale linjene som danner rutenettet i et CSS-rutenettoppsett. De spesifiserer start- og sluttpunktene til rader og kolonner, og hjelper til med å organisere hvor ting går på rutenettet. Disse linjene er som kantene på bokser; de har tall som hjelper deg med å referere til elementene når du plasserer dem. Her representerer den røde stiplede linjen dem:
2. Rutenettspor: De er gapene mellom rutenettlinjer som definerer rader og kolonner. De er som byggesteinene i rutenettoppsettet. I bildet ovenfor representerer det fargede området innenfor hvert element rutenettsporet.

Tenk på rutenettlinjer og spor som byggesteinene i et rutenettoppsett, som linjene på et ark med millimeterpapir. Når en horisontal rutenettlinje skjærer en vertikal rutenettlinje, danner den en boksformet celle. Disse cellene fungerer som beholdere der du kan plassere rutenettelementene dine.

CSS Grid Container Properties

Dette er egenskaper du kan bruke på rutenettbeholderen for å organisere oppsettet og hjelpe til med å plassere elementer i den. Som nevnt tidligere er en av dem visningsegenskapen satt til rutenett. Her er flere:

Rutenettmal

Denne egenskapen definerer størrelsen på rader og kolonner. Du kan dimensjonere disse egenskapene ved å bruke piksler, prosenter eller brøkenheten (fr). Du kan også bruke søkeord som auto, minmaks(), og gjenta() for å øke fleksibiliteten.

• rutenett-mal-rader: Stiller inn radhøyder.
• rutenett-mal-kolonner: Definerer kolonnebredder.

Her er noen eksempler:

Bruker piksler:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Bruker prosenter:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Ved å bruke fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

Bruke auto og minmax() nøkkelord:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Bruke repeat() for konsekvent størrelse:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Automatisk plassering og rutenettmalområder

Automatisk plassering: Automatisk plassering er som å la rutenettet bestemme hvor elementer skal plasseres. Hvis du ikke spesifiserer nøyaktige posisjoner, vil rutenettet automatisk plassere elementer i den rekkefølgen de vises i markeringen. Dette er nyttig når du har mange elementer og vil at de skal fylle rutenettet jevnt.

Rutenettmalområder: Tenk på rutenettmalområder som å lage et oppsett med navngitte soner. Det er som å navngi rom på en planløsning. Du kan referere til disse områdenavnene når du plasserer rutenettelementer. For eksempel:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Denne layouten er som et rutenett med tre kolonner og fire rader. Det er to rader for hovedinnholdsområdet. De merkede områdene inkluderer "topptekst", "sidefelt", "innhold" og "bunntekst". I de neste avsnittene lærer du hvordan du bruker disse områdeetikettene i egenskapene til hvert rutenettelement.

Justering i CSS Grid

Du kan bruke justeringsegenskaper til å kontrollere plasseringen av rutenettelementer i rutenettcellene deres. Eiendommene er:

• rettferdiggjøre-elementer: Kontrollerer horisontal justering av elementer i rutenettcellene deres.
  • Verdier: start, slutt, senter og strekk.
• align-elementer: Kontrollerer vertikal justering av elementer i rutenettcellene deres.
  • Verdier: start, slutt, senter og strekk.
• rettferdiggjøre-innhold: Justerer hele rutenettet i beholderen langs den horisontale aksen.
  • Verdier: start, slutt, senter, strekk, mellomrom, mellomrom rundt og jevnt mellomrom.
• align-innhold: Justerer hele rutenettet i beholderen langs den vertikale aksen.
  • Verdier: start, slutt, senter, strekk, mellomrom, mellomrom rundt og jevnt mellomrom.

Her er et eksempel:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

I dette eksemplet vil elementer sentreres både horisontalt og vertikalt i cellene. Plassen vil fordeles jevnt mellom søylene i hele rutenettet, og rutenettet vil sentreres vertikalt i beholderen.

Rutenettgap

Rutenettgap refererer til mellomrommet mellom rader og kolonner i et rutenettoppsett. Det bidrar til å skape visuell separasjon og legger til litt rom mellom rutenettelementer.

De rutenett-gap egenskap lar deg angi gapet mellom rader og kolonner. Du kan bruke ulike enheter for å definere det, for eksempel piksler (px), prosenter (%), em-enheter (em) og mer.

.grid-container {
grid-gap: 20px;
}

I dette eksemplet har rutenettbeholderen to kolonner med et gap på 20 piksler mellom dem. Denne avstanden skiller kolonnene visuelt og forbedrer oppsettet.

CSS Grid Item Properties

Her er noen nøkkelegenskaper som kontrollerer oppførselen til individuelle rutenettelementer i et CSS-rutenettoppsett, sammen med eksempler:

rutenett-rad-start og rutenett-rad-slutt:

• Definerer start- og sluttradlinjene for et element.
• Verdier kan være linjenummer, "span n" eller "auto".

.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Denne koden plasserer Rutenettelement 1 fra den andre raden til den fjerde raden.

rutenett-kolonne-start og rutenett-kolonne-slutt:

• Definerer start- og sluttkolonnelinjene for et element.
• Verdier kan være linjenummer, "span n" eller "auto".

.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Denne koden plasserer Rutenettelement 2 fra den første kolonnelinjen til den tredje kolonnelinjen.

rutenettområde:

• Spesifiserer størrelsen og posisjonen til et rutenettelement i rutenettet ved å referere til de navngitte rutenettlinjene i rutenett-mal-områder.
• Som nevnt tidligere er forhåndsdefinerte områdenavn allerede i bruk med rutenett-mal-områder eiendom. Her er et eksempel på hvordan du kan bruke det sammen med rutenettområde.

.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

Her er resultatet:

rettferdiggjøre-selv:

• Justerer individuelle elementer horisontalt innenfor cellen.
• Verdier kan være start, slutt, senter og strekning.

.grid-item-5 {
justify-self: center;
}

Denne koden sentrerer horisontalt Rutenettelement 5 inne i cellen sin.

innrette seg selv:

• Juster individuelle elementer vertikalt i cellen.
• Verdier kan være start, slutt, senter og strekning.

.grid-item-1 {
align-self: end;
}

Denne koden justeres Rutenettelement 1 til bunnen av cellen.

Kombiner og tilpass disse egenskapene gjerne for å lage oppsettet og utseendet du ønsker for hvert rutenettelement i CSS Grid.

Opprette responsive oppsett ved hjelp av CSS-rutenett

Bruke CSS-rutenett for lage responsive layouter er viktig for å sikre at nettsiden din sømløst tilpasser seg ulike skjermstørrelser og enheter. Du kan bruke disse metodene:

• Mediespørsmål: Du kan bruke mediespørringer å bruke forskjellige rutenettoppsett avhengig av skjermstørrelser. For eksempel kan det hende du må omorganisere rutenettelementer eller justere kolonnebredder for mindre skjermer.
• Fleksible enheter: Bruk relative enheter som prosenter og fr for å aktivere rutenettelementer og kolonner for å justere proporsjonalt med tilgjengelig plass.
• minmaks(): Bruke minmaks() funksjon for å spesifisere en rekke størrelser for rutenettkolonner eller rader. Det sikrer at elementer ikke vises for små eller for store på forskjellige skjermer.

Husk å justere kolonner og andre elementer som mellomrom mellom rutenettelementer, skriftstørrelser og marger. Det sikrer en konsistent og godt designet layout som fungerer godt på ulike enheter.

Utforsk mulighetene for CSS Grid Layout

Ved å omfavne fleksibiliteten og kraften til CSS-nettverket vil du kunne lage layouter som ikke bare ser bra ut, men som også tilpasser seg sømløst kravene til moderne webdesign. Så dykk inn i nettverdenen, utforsk mulighetene og løft ferdighetene dine i nettutvikling.

Når du fordyper deg i layoutsystemer, kan det være lurt å sammenligne andre layoutmetoder med CSS-rutenett. Du kan gjøre det med CSS Flexbox-modulen. Dette vil hjelpe deg å lære å bestemme når du jobber med et prosjekt.