CSS Grid Starter Layouts - CSS-triks

Anonim

Dette er en samling startmaler for oppsett og mønstre ved bruk av CSS Grid. Tanken her er å vise frem hva teknikken er i stand til å gjøre og gi et utgangspunkt som kan omformuleres til andre prosjekter.

Husk at nettleserstøtte for Grid er bra, men krever tilbakefall for eldre nettlesere. Det betyr at en rett opp kopi og lim av disse kanskje ikke passer godt i noen brukssaker.

Holy Grail Layout

Den klassiske layouten med tre kolonner der to sidefelt og en container som holder kroppskopien, er klemt mellom topptekst og bunntekst i full bredde.

Fleksibel Holy Grail

Alt forblir intakt når visningsbredden endres ved hjelp av en væskeinnholdsbeholder.

Se Pen CSS Grid - Holy Grail 2 av Geoff Graham (@geoffgraham) på CodePen.

Responsiv Holy Grail

Ting blir stablet når visningsområdet blir smalt.

Se pennen CSS Grid: Holy Grail Layout - Responsive av Geoff Graham (@geoffgraham) på CodePen.

2-kolonner med topptekst og bunntekst

Et klassisk bloggoppsett der den ene kolonnen er for innlegget og den andre for en sidefelt.

Fleksible 2-kolonner

Oppsettet blir squishy når visningsområdet blir smalt, men oppsettet holder seg på plass.

Se Pen CSS Grid: Header, Footer with 2-Column (Flexible) av Geoff Graham (@geoffgraham) på CodePen.

Responsive 2-kolonner

Ting blir stablet på mindre skjermer.

Se Pen CSS Grid: Header, Footer with 2-Column (Responsive) av Geoff Graham (@geoffgraham) på CodePen.

Jevnt fordelt, passer etter behov

Elementer flyter inn i oppsettet og slutter når det ikke er flere.

Se pennen CSS-nett jevnt fordelt, så mange som nødvendig av Geoff Graham (@geoffgraham) på CodePen.

Artikkel med Breakout

Et flott lite triks av Tyler Sticka som lar et element bryte ut av rutenettet. Rachel Andrew gir en grundig forklaring om hvordan navngitte rutenettlinjer lar dette fungere.

Se Pen CSS Grid: Article with Breakout av Geoff Graham (@geoffgraham) på CodePen.

Grunnleggende kalender

Som du kanskje forventer, fungerer CSS Grid bra for et kalendernett.

Se Pen CSS Grid: Calendar av Geoff Graham (@geoffgraham) på CodePen.

Monopolstyret

En enkel rekreasjon av spillbrettet. Jen Simmons har en søt demo komplett med Monpoly-stiler.

Se Pen CSS Grid: Monopol Board av Geoff Graham (@geoffgraham) på CodePen.

Vår læringspartner Frontend Masters

Trenger du front-end utviklingstrening?

Frontend Masters er det beste stedet å få det. De har kurs om alle de viktigste front-end teknologiene, fra React til CSS, fra Vue til D3, og videre med Node.js og Full Stack.