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