CSS Grid Starter Layouts - CSS-trucs

Dit is een verzameling startersjablonen voor lay-outs en patronen met CSS Grid. Het idee hier is om te laten zien wat de techniek kan en een startpunt te bieden dat opnieuw kan worden gebruikt voor andere projecten.

Onthoud dat browserondersteuning voor Grid goed is, maar terugval vereist voor oudere browsers. Dat betekent dat een gewone kopie en plak hiervan in sommige gevallen niet goed geschikt is.

Heilige Graal Layout

De oude klassieke lay-out met drie kolommen, waarbij twee zijbalken en een container met de hoofdtekst zijn ingeklemd tussen een koptekst en voettekst op volledige breedte.

Flexibele heilige graal

Alles blijft intact terwijl de breedte van de viewport verandert met behulp van een vloeistofcontainer.

Zie de Pen CSS Grid - Holy Grail 2 door Geoff Graham (@geoffgraham) op CodePen.

Responsieve heilige graal

Dingen worden opgestapeld zodra de viewport smal wordt.

Zie de Pen CSS Grid: Holy Grail Layout - Responsive door Geoff Graham (@geoffgraham) op CodePen.

2-kolommen met koptekst en voettekst

Een klassieke bloglay-out waarbij de ene kolom voor het bericht is en de andere voor een zijbalk.

Flexibele 2-kolommen

De lay-out wordt squishy wanneer de viewport smal wordt, maar de lay-out blijft op zijn plaats.

Zie het Pen CSS-raster: koptekst, voettekst met 2 kolommen (flexibel) door Geoff Graham (@geoffgraham) op CodePen.

Responsieve 2 kolommen

Dingen worden opgestapeld op kleinere schermen.

Zie het Pen CSS-raster: koptekst, voettekst met 2 kolommen (responsief) door Geoff Graham (@geoffgraham) op CodePen.

Gelijkmatig verdeeld, passend zoals nodig

Elementen vloeien over in de lay-out en eindigen wanneer er niet meer zijn.

Zie het Pen CSS-raster gelijkmatig verdeeld, zoveel als nodig is door Geoff Graham (@geoffgraham) op CodePen.

Artikel met Breakout

Een geweldige kleine truc van Tyler Sticka waarmee een element uit het raster kan breken. Rachel Andrew geeft een grondige uitleg over hoe benoemde rasterlijnen dit laten werken.

Zie de Pen CSS Grid: Article with Breakout door Geoff Graham (@geoffgraham) op CodePen.

Basis Kalender

Zoals je zou verwachten, werkt CSS Grid goed voor een agendaraster.

Zie de Pen CSS Grid: Calendar door Geoff Graham (@geoffgraham) op CodePen.

Monopoly-bord

Een eenvoudige recreatie van het speelbord. Jen Simmons heeft een zoete demo compleet met Monpoly-stijlen.

Zie de Pen CSS Grid: Monopoly Board door Geoff Graham (@geoffgraham) op CodePen.

Onze Learning Partner Frontend Masters

Front-end ontwikkelingstraining nodig?

Frontend Masters is de beste plaats om het te krijgen. Ze hebben cursussen over de belangrijkste front-endtechnologieën, van React tot CSS, van Vue tot D3, en nog veel meer met Node.js en Full Stack.