En introduktion til CSS Grid Layout (med eksempler)

CSS Grid har overtaget verdenen af ​​webdesign. Det er virkelig sejt. Der er masser af tutorials, blogs og artikler på Internettet, som er gode kilder til viden.

Men de fleste af dem lærer dig det grundlæggende med meget få reelle eksempler. Så i denne vejledning ser vi på eksempler, når vi lærer.

Hvad er gitter?

CSS Grid giver os mulighed for at skrive bedre layouts ved hjælp af net i browser. Før CSS Grid måtte vi enten bruge vores eget brugerdefinerede gittersystem eller noget lignende Bootstrap.

Disse andre muligheder fungerer fint, men CSS-gitter tager smerten ud af de fleste af de ting, vi stod over for i disse løsninger.

CSS Grid gør det til et stykke kage at udvikle enkle og komplekse layouts. I denne blog vil vi lære nogle grundlæggende terminologier og derefter gå videre med et simpelt layouteksempel.

Grundlæggende terminologier

De grundlæggende udtryk forbundet med CSS Grid er som følger:

  1. Kolonner
  2. Rækker
  3. Celler
  4. Grid Lines
  5. Rende

Alle vilkår er forklaret i diagrammet ovenfor. Dette eksempel er et 3x2 kolonnegitter, hvilket betyder 3 kolonner og 2 rækker.

Eksempel på layout

Nu hvor de grundlæggende begreber er ude af vejen, skal vi bruge disse begreber til at lave et eksempellayout som nedenfor:

Som du kan se, er der et overskrift og en sidefod. Derefter har den midterste række 3 kolonner med nav i den første kolonnesidepanel til højre og det vigtigste indholdsområde i midten (som optager det meste af rækken).

Nedenfor er HTML-eksemplet til dette eksempel.

 HEADER NAV CONTENTS ASIDE FOOTER 

Nu hvor HTML er ude af vejen, lad os grave i CSS. Lad os først og fremmest give det noget styling, så vores HTML ligner ovenstående. Disse CSS-regler er ikke en del af CSS-gitteret, så du kan udelade dem, hvis du vil.

.wrapper * { background: orange; display: flex; justify-content: center; align-items: center; margin-bottom: 1px; margin-right: 1px; }

Som du kan se, styler jeg alle elementerne i en indpakningsbeholder. Jeg indstiller dens baggrundsfarve til orangeog giver, bottomog rightmargins.jeg indstiller displayflexbare for at justere elementernes dødpunkt ved at indstille justify-contentog align-itemstil center.

Lad os derefter komme ind i CSS Grid-delen af ​​det.

.wrapper { display: grid; grid-template-columns: 1fr 5fr 2fr; grid-template-rows: 5fr 20fr 5fr; grid-gap: 10px; height: 720px; }

I ovenstående kode sætter vi os displaytil grid- deraf titlen på dette emne. Sådan konverterer vi en container til grid.

Dernæst indstiller vi kolonnerne og rækkerne. Vi vil gøre dette ved hjælp af grid-template-columnsog grid-template-rowsegenskaber. grid-template-columnsgiver os mulighed for at indstille antallet af kolonner med deres passende width. grid-template-rowsgiver os mulighed for at indstille antallet af rowsmed deres passende height.

I eksemplet ovenfor er der 3 kolonner med første kolonne 1 fraction, den anden kolonne 5 fractionog den tredje kolonne 2 fractions. En enkelt brøkdel betyder "et stykke af hvor mange stykker vi deler dette op i" .

Hvis du ser på det samme eksempel ovenfor, gælder det samme koncept for rows. Der er tre rækker, og den første række indeholder den, headerder tager hele rækken på tværs af alle tre kolonner. Den anden række tager nav, indhold og til side, mens sidefoden går til den tredje og sidste række og tager alle tre kolonner op.

Det betyder, at første og sidste rækker tage op den samme mængde højde, der er 5 fractions. Og den midterste række optager resten af ​​den resterende højde.

Dernæst opretter vi også en tagrender på 10 pixel. Vi kan gøre dette i CSS Grid ved at bruge grid-gapejendommen. Endelig indstiller vi en højde for vores indpakningscontainer.

Hvis vi ser på det i browseren, får vi det resultat, vi leder efter:

Lad os nu få det til at se mere ud som vi vil have det til at se ved at indstille nogle egenskaber til sidehoved og sidefod. Vi vil fortælle sidehoved og sidefod at tage hele deres rækker op.

Vi vil gøre dette ved hjælp af grid-column-startog grid-column-endegenskaber, som dette:

header { grid-column-start: 1; grid-column-end: 4; } footer { grid-column-start: 1; grid-column-end: 4; }

Som du kan se, starter både sidehoved og sidefod fra grid line1 og slutter ved grid line4. Dette giver dem mulighed for at tage hele deres rækker op. Dette giver den nøjagtige output, vi leder efter, som nedenfor:

Komplet kode

   CSS Grid  .wrapper { display: grid; grid-template-columns: 1fr 5fr 2fr; grid-template-rows: 5fr 20fr 5fr; grid-gap: 10px; height: 720px; } header { grid-column-start: 1; grid-column-end: 4; } footer { grid-column-start: 1; grid-column-end: 4; } .wrapper * { background: orange; display: flex; justify-content: center; align-items: center; margin-bottom: 1px; margin-right: 1px; } HEADER NAV CONTENTS ASIDE FOOTER 

Det er det for denne artikel. Du kan følge mig her for flere artikler. Hvis du kunne lide det, så glem ikke at dele det på sociale medier.