CSS Grid Starter Layouts - CSS-tricks

Innehållsförteckning

Detta är en samling startmallar för layouter och mönster med CSS Grid. Tanken här är att visa upp vad tekniken kan göra och ge en utgångspunkt som kan omformuleras för andra projekt.

Kom ihåg att webbläsarsupport för Grid är bra men kräver återfall för äldre webbläsare. Det betyder att en rak kopia och klistra av dessa kanske inte passar bra för vissa användningsfall.

Holy Grail Layout

Den klassiska layouten med tre kolumner där två sidofält och en behållare som håller kroppskopian är inklämda mellan sidhuvud och sidfot i full bredd.

Flexibel Holy Grail

Allt förblir intakt när visningsbredden ändras med en behållare med flytande innehåll.

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

Responsiv Holy Grail

Saker och ting staplas upp när visningsområdet blir smalt.

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

2-kolumner med sidhuvud och sidfot

En klassisk blogginlägg där en kolumn är för inlägget och den andra för ett sidofält.

Flexibla 2-kolumner

Layouten blir snygg när visningsområdet blir smalt men layouten förblir på plats.

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

Responsiv 2-kolumner

Saker staplas upp på mindre skärmar.

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

Jämnt fördelad, passa efter behov

Element flyter in i layouten och slutar när det inte finns fler.

Se pennan CSS Grid jämnt fördelad, så många som behövs av Geoff Graham (@geoffgraham) på CodePen.

Artikel med Breakout

Ett fantastiskt litet trick av Tyler Sticka som låter ett element bryta ut ur nätet. Rachel Andrew ger en grundlig förklaring om hur namngivna nätlinjer låter detta fungera.

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

Grundläggande kalender

Som du förväntar dig fungerar CSS Grid bra för ett kalendernät.

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

Monopolstyrelse

En enkel rekreation av spelbrädet. Jen Simmons har en söt demo komplett med Monpoly-stilar.

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

Vår lärandepartner Frontend Masters

Behöver du utvecklingsutbildning i front-end?

Frontend Masters är det bästa stället att få det. De har kurser om alla de viktigaste front-end-teknikerna, från React till CSS, från Vue till D3 och därefter med Node.js och Full Stack.

Intressanta artiklar...