
CSS Grid is a powerful layout tool that can be used to create creative and inspiring websites. This article showcases 40+ examples of CSS Grid layouts from CodePen, a popular website for sharing code snippets.
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