Introduksjon til CSS Grid Layout med eksempler

Hva du skal skape

I denne opplæringen vil jeg dekke grunnleggende om CSS-gridoppsettet med eksempelscenarier. CSS Grid støttes av nesten alle moderne nettlesere nå, og er klar til bruk i produksjon. I motsetning til andre layoutmetoder som flexbox, gir gridoppsettet deg to grader av frihet, noe som gjør det så allsidig at plasseringen av elementene bare er en bris.

HTML struktur for CSS Grid Layout

For å kunne bruke CSS Grid-oppsettet, bør HTML-elementene ha en bestemt struktur.

Du må vikle elementene du vil kontrollere i en foreldrebeholder DIV.

 
1
 
2
 
3
 
4
 

La oss legge til noen styling for våre DIV slik at vi kan skille dem enkelt.

Still også inn skjerm: grid i din wrapper DIV slik at vi kan begynne å bruke gridoppsettet.

.wrapper> div bakgrunnsfarge: oransje; grense: 1px svart solid;  .wrapper> div: nth-child (oddetall) bakgrunnsfarge: indianred;  .wrapper display: grid

Fra dette punktet går all styling inn i wrapper DIV. Hvis vi noen gang ønsker å kontrollere barnets DIVer til enhver tid, vil vi legge til grensespesifikke stylingsregler for det bestemte barnet DIV.

Regler for foreldre DIV

De første tingene vi trenger å lære om gridoppsettet er gitter-mal-kolonner og gitter-mal-rader. Disse to reglene styrer i utgangspunktet hvordan nettverket ditt er formet.

Verdien av disse reglene kan være en lengde, en prosentandel eller en brøkdel av ledig plass i rutenettet. Du kan også sette noen verdi til auto, som fyller gjenværende plass.

La oss se noen eksempler nedenfor.

Grid-template-kolonner og Grid-template-rader

gitter-mal-kolonner

.wrapper display: grid; rutenett-mal-kolonner: 100px 100px 100px

.wrapper display: grid; grid-template-kolonner: 100px auto 100px

.wrapper display: grid; rutenett-mal-kolonner: 1fr 1fr 1fr 1fr; 

rutenett-mal-kolonner og rutenett-mal-rader

La oss begynne å bygge et ekte rutenett, der vi har kontroll over både kolonner og rader.

.wrapper display: grid; rutenettmall-kolonner: 1fr 1fr; rutenett-mal-rader: 50px 50px; 

.wrapper display: grid; rutenett-mal-kolonner: 100px 20px 250px; rutenett-mal-rader: 150px 40px; 

Her har jeg nettopp lagt til to barns DIV til HTML for samme CSS.

Gjenta et rutemaleremønster

Hvis du har et repeterende mønster for gitter-mal,Du kan bare bruke gjenta og fortell det hvor mange ganger du gjentar det samme mønsteret.

Si for eksempel at du har 12 elementer, og du vil legge dem ut horisontalt med like bredde. Du kan gjenta 1fr 12 ganger innenfor gitter-mal-kolonner, som ikke er effektiv. Så, i stedet, kan du bruke gjenta (12, 1fr).

.wrapper display: grid; Rutenettmall-kolonner: Gjenta (12, 1fr)

På samme måte kan du gjenta et mønster.

.wrapper display: grid; Rutenettmall-kolonner: Gjenta (4, 1fr 5fr 10fr); 

Rutenett-auto-kolonner og rutenett-auto-rader

Denne regelen hjelper deg med å angi bredden og høyden til nettceller.

Hvis du ikke angir denne regelen, vil rutenettene og kolonnene dine utvide med innholdet.

.wrapper display: grid; Rutenett-mal-kolonner: Gjenta (4, 1fr); grid-auto-rader: 100px; 

.wrapper display: grid; Rutenett-mal-kolonner: Gjenta (4, 1fr); rutenett-auto-rader: 20px 80px; 

En fin funksjon å bruke med gitter-auto regelen er MinMax funksjon.

Du angir bare minimumstørrelsen som den første parameteren og maksimumet som den andre parameteren. Hvis du angir auto For den andre parameteren får du en responsiv cellestørrelse.

.wrapper display: grid; Rutenett-mal-kolonner: Gjenta (4, 1fr); rutenett-auto-rader: minmax (50px, auto)

Nedenfor ser du to forskjellige DIV-innhold med de samme CSS-reglene.

Grid-gap

Som navnet antyder, skaper denne regelen et gap mellom gridceller.

Hvis du bruker grid-gap: 5px, Du får et 5px mellomrom mellom hver celle. Alternativt kan du bare sette rad- eller kolonnehullene, med rutenett: 5px og grid-column gap: 5px henholdsvis.

.wrapper display: grid; Rutenett-mal-kolonner: Gjenta (4, 1fr); grid-auto-rader: minmax (50px, auto); grid-gap: 5px; 

Regler for Child DIVs

Så langt har vi bare fokusert på formen på rutenettet, og gjenstander som bare strømmer inn i rutenettet. Nå vil vi lære å kontrollere hvert element enkeltvis.

For å plassere elementene bruker vi rutenettlinjer som referanse. Nedenfor ser du rad- og kolonne linjer i henholdsvis svart og oransje for et 2x4-grid.

Vi vil bruke gitter-kolonne og gitter-rad Regler med linjenumre for å plassere elementene.

For eksempel, hvis vi setter inn rutenett: 1/3 for første barn div vil den bruke de to første cellene i rutenettet. 

Vurder HTML og CSS nedenfor:

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 

.wrapper display: grid; Rutenett-mal-kolonner: Gjenta (4, 1fr); grid-auto-rader: 100px; grid-gap: 5px; 

Vi har fire like store kolonner og åtte elementer i wrapper DIV.

 .div1 grid-column: 1/3;  

 .div1 grid-column: 1/3; rutenett: 1/3; 

Du kan også kombinere disse to reglene til en enkelt regel, grid-område: rowStart / columnStart / rowEnd / columnEnd.

 .div1 grid-område: 2/2/3/4; 

Som illustrert i eksemplet ovenfor, er elementene ikke bundet til HTML-strukturen. Legg merke til hvordan det første elementet blir reposisjonert med gitter-området regel.

Grid-area & grid-template-områder

Du kan navngi hvert barnelement og bruke disse navnene til å opprette nettverket ditt. Dette er veldig kraftig, og det gjør layout mer intuitivt.

Så vi definerer en DIV for hvert element vi planlegger å plassere i vårt rutenett system.

Jeg planlegger å ha en topptekst, venstre kolonne, høyre kolonne, middleTop, middleBottom og en bunntekst.

Så i min HTML trenger jeg det mange barns DIVs. Klassenavnene kan være noe.

 
Overskrift
 
LeftCol
 
RightCol
 
midTop
 
midBottom
 
bunntekst
 
 

Deretter satte jeg inn i mitt CSS gitter-området navn. Disse navnene kan være noe; de er ikke ment å matche klassenavnene.

.header grid-area: header; bakgrunnsfarge: LightSeaGreen;  .leftCol grid-area: leftCol; bakgrunnsfarge: oransje;  .RightCol grid-area: rightCol; bakgrunnsfarge: lyseblå;  .midTop grid-område: midTop; bakgrunnsfarge: lysegrå;  .midBottom grid-area: midBottom; bakgrunnsfarge: rosa;  .footer grid-area: footer; bakgrunnsfarge: lysegrønn; 

Så inne i min wrapper DIV, jeg bruker grid-template-områder Regel å legge ut disse elementene ved å referere til deres definerte navn.

Legg merke til at jeg har et 4x4-rutenett.

.wrapper display: grid; rutenett-mal-kolonner: 1fr 4fr 4fr 1fr; rutenett-mal-rader: 50px 100px 100px 30px; grid-template-områder: "header header header header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" "footer footer footer footer"; grid-gap: 5px; 

Hvis jeg for eksempel vil at bunnteksten skal ta bare to kolonner og være sentrert, erstatter jeg bare det første og det siste utseendet av bunntekst med en prikk (.) i grid-template-områder.

.wrapper display: grid; rutenett-mal-kolonner: 1fr 4fr 4fr 1fr; rutenett-mal-rader: 50px 100px 100px 30px; grid-template-områder: "header header header header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" ". footer footer."; grid-gap: 5px; 

Konklusjon

CSS Grid har tonnevis av regler, og jeg dekket bare de mest nyttige i denne opplæringen. Du kan fortsatt grave inn i MDN Web Docs eller andre kilder for hele listen over gridegenskaper og funksjoner.