CSS Grid Starter Layouts - CSS-tricks

Dette er en samling af startskabeloner til layout og mønstre ved hjælp af CSS Grid. Ideen her er at vise, hvad teknikken er i stand til at gøre, og give et udgangspunkt, der kan omformuleres til andre projekter.

Husk, at browsersupport til Grid er god, men kræver tilbagefald til ældre browsere. Det betyder, at en lige kopi og indsæt af disse muligvis ikke er velegnet til nogle brugssager.

Holy Grail Layout

Det klassiske layout med tre søjler, hvor to sidebjælker og en beholder, der indeholder body-kopien, er klemt mellem en sidehoved og sidefod i fuld bredde.

Fleksibel Holy Grail

Alt forbliver intakt, når bredden på visningsområdet ændres ved hjælp af en væskeindholdsbeholder.

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

Responsiv hellig gral

Tingene bliver stablet, når visningen bliver smal.

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

2-kolonner med sidehoved og sidefod

Et klassisk bloglayout, hvor den ene kolonne er til indlægget og den anden til et sidebjælke.

Fleksible 2-kolonner

Layoutet bliver squishy når visningen bliver smal, men layoutet forbliver på plads.

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

Responsive 2-kolonner

Ting bliver stablet på mindre skærme.

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

Jævnt fordelt, passer efter behov

Elementer flyder ind i layoutet og slutter, når der ikke er flere.

Se pennen CSS-net jævnt fordelt, så mange som nødvendigt af Geoff Graham (@geoffgraham) på CodePen.

Artikel med Breakout

Et godt lille trick af Tyler Sticka, der gør det muligt for et element at bryde ud af nettet. Rachel Andrew giver en grundig forklaring på, hvordan navngivne gitterlinjer tillader dette at fungere.

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

Grundlæggende kalender

Som du måske forventer, fungerer CSS Grid godt for et kalendernet.

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

Monopol Board

En simpel rekreation af spillebrættet. Jen Simmons har en sød demo komplet med Monpoly-stilarter.

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

Vores læringspartner Frontend Masters

Brug for front-end udviklingstræning?

Frontend Masters er det bedste sted at få det. De har kurser om alle de vigtigste front-end-teknologier, fra React til CSS, fra Vue til D3 og videre med Node.js og Full Stack.