50+ CSS grid template

Layout in CSS has always been a difficult task: hacking solutions using positioning, floats, and therefore the one-dimensional flexbox has never been very satisfactory. Fortunately, there’s a replacement tool to feature to our arsenal: CSS Grid Layout. it’s an amazingly powerful layout system that allows us to style pages using a two-dimensional grid – offering the type of fine-grained layout control that print designers take for granted!

Grid Layout’s been in development for a short time, but has recently been made a W3C candidate recommendation and has been added to most of the main browsers, so it is prepared for clock time.

This collection includes:

Image Mosaic Effect with CSS Grids & Blend Modes

Author

Dudley Storey

Made With

HTML,CSS(SCSS)

CSS Grid: Calendar

Author

Olivia Ng

Made With

HTML(PUG),CSS(SCSS)

CSS Grid: Form to Badge

Author

Olivia Ng

Made With

HTML(PUG),CSS(SCSS),JS

Procedurally Generated CSS Numbers

Author

Adam Kuhn

Made With

HTML(HAML),CSS(SCSS),JS

CSS Grid Poster

Author

jakob-e

Made With

HTML(PUG),CSS(SCSS)

CSS Grid Responsive – Books

Author

Andy Barefoot

Made With

HTML,CSS,JS

CSS Grid Layout Demo

Author

Stacy

Made With

HTML,CSS(SCSS)

CSS Grid: Bullet Journal

Author

Olivia Ng

Made With

HTML(PUG),CSS(SCSS)

CSS Grid: Makeup Palettes

Author

Olivia Ng

Made With

HTML(PUG),CSS(SCSS)

Isometric Card Grid

A remake of an older demo, which is a Codrops-inspired scrollable grid component. This time, I used CSS grid to organize the cards, a vanilla CSS variable to control the scrolling, and much less JavaScript.

Due to use of some modern CSS techniques, this demo won’t work properly in IE.

Author

Jon Kantner

Made With

HTML(PUG),CSS,JS