45+ CSS Grid Examples - Free Code + Demos
Collection of 45+ CSS Grid Examples. All items are 100% free and open-source.
1. CSS Grid: Smashing Mag's Contents Page
"Well, this should be easy enough..." It was not.
Author: Olivia Ng (oliviale)
Links: Source Code / Demo
Created on: August 2, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
2. CSS Grid Experiment: Keyboard Layout
Author: Raj Suhail (irajsuhail)
Links: Source Code / Demo
Created on: May 20, 2019
Made with: HTML, CSS
3. CSS Grid: Excel Spreadsheet
Image sprite for icons and things are not clickable/functional because I want to maintain my sanity :D
Author: Olivia Ng (oliviale)
Links: Source Code / Demo
Created on: January 31, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: spreadsheet
4. CSS Grid: Train Ticket
Train ticket to Hogwarts, with a flat design twist!
Author: Olivia Ng (oliviale)
Links: Source Code / Demo
Created on: January 13, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: ticket
5. CSS Grid Menu
Author: simon (simonpatrat)
Links: Source Code / Demo
Created on: January 4, 2019
Made with: HTML, SCSS, Babel
6. CSS Grid: Bullet Journal
When you can't afford to buy a Moleskine and nice stationery for bullet journaling, so you code it up instead 😂
Author: Olivia Ng (oliviale)
Links: Source Code / Demo
Created on: December 26, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: bullet journal
7. CSS Grid: Makeup Palettes
My first time using gridinside flex, instead of the other way around 😱
Author: Olivia Ng (oliviale)
Links: Source Code / Demo
Created on: December 23, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: makeup, palette
8. CSS Grid: Product Catalog
those github contributions tho
Author: Olivia Ng (oliviale)
Links: Source Code / Demo
Created on: December 9, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: product catalog, shirts, masonry grid, maybe
9. CSS Grid: Periodic Table
My very first CSS Grid Experiment! So I can't actually group them together in a cluster like an actual periodic table or it wouldn't make sense or would look too forced 😔 One of my fondest memories of 2018 is when I found the resolve to deactivate Facebook, only to have my team lead tel...Read More
Author: Olivia Ng (oliviale)
Links: Source Code / Demo
Created on: November 21, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-grid, periodic-table, just internet things
10. CSS-Grid Gantt Chart
This is a small gantt chart with css-grid.
Author: Phil (ph1p)
Links: Source Code / Demo
Created on: August 4, 2018
Made with: HTML, SCSS
Tags: css-grid, gantt, chart, grid, css
11. Apple Keyboard
Just another CSS grid demo. This time, it’s an interactive Apple USB keyboard (without the cable). Update 6/7/18: reduced JS code
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Created on: June 1, 2018
Made with: HTML, CSS, JS
Tags: mac, apple, keyboard, grid, skeuomorphic
12. Scantron Answer Sheet (CSS Grid Demo)
Needed something CSS grid-related to do, so I decided to recreate a Scantron answer sheet. These were used for midterm and final exams when I was in high school. Update 4/22/19: Made the “Turn sideways” option more visible
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Created on: May 25, 2018
Made with: Pug, CSS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-grid, bubble, school
13. Grid Experiment No. 4
Recreation of a print menu from The Phoenicia Diner in Phoenicia, NY using CSS Grid.
Author: Jules Forrest (julesforrest)
Links: Source Code / Demo
Created on: January 14, 2018
Made with: HTML, SCSS
Tags: grid, css-grid, menu, typography, design
14. Responsive Vintage Kodak Film Wallet In CSS Grid
Responsive CSS Grid experiment of a vintage Kodak Film Wallet. Original film wallet image found here: http://l7.alamy.com/zooms/e619fb14a419453db5b7d75fbe699906/kodak-film-wallet-btpb88.jpg Also wrote a post about the form... https://codepen.io/KristopherVanSant/post/attempting-to-expl...Read More
Author: Kristopher Van Sant (KristopherVanSant)
Created on: October 12, 2017
Made with: HTML, CSS
Tags: css-grid, responsive css grid, vintage layout, kodak, css grid experiment
15. Grid Experiment No. 3
Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.
Author: Jules Forrest (julesforrest)
Links: Source Code / Demo
Created on: September 4, 2017
Made with: HTML, CSS
Tags: grid, css-grid, editorial, layout
16. Grid Experiment No. 1
Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.
Author: Jules Forrest (julesforrest)
Links: Source Code / Demo
Created on: September 2, 2017
Made with: HTML, CSS
Tags: css-grid, grid, editorial, layout
17. MARVEL POSTER [CSS GRID]
Having fun with CSS Grid and Clip-path :)
Author: Dannie Vinther (dannievinther)
Links: Source Code / Demo
Created on: July 27, 2017
Made with: HTML, CSS, JS
Tags: css-grid, css-variables, grid, writing-mode, text-decoration-skip
18. CSS Grid Pulse
Author: Andrew Harvard (aharvard)
Links: Source Code / Demo
Created on: March 8, 2017
Made with: HTML, SCSS
19. CSS Grid Layout And Comics
The final demo. Read the full tutorial for more details.
Author: Envato Tuts+ (tutsplus)
Links: Source Code / Demo
Created on: November 11, 2016
Made with: HTML, CSS
Tags: css grid, grid, barry the cat, comic
20. Tribute Page - Chekhov | FreeCodeCamp Project
This is Tribute Page about Chekhov created by Firdavs Gafurjonov for freeCodeCamp's Responsive Web Design Project
Author: gfirik (gfirik)
Links: Source Code / Demo
Created on: August 18, 2020
Made with: HTML, CSS
Tags: freecodecamporg, responsivewebdesign, tributepage, css-grid
21. CSS Grid Example
https://dribbble.com/shots/13580099/attachments/5184517?mode=media
Author: Sampath Paravasthu (SampathParavasthu)
Links: Source Code / Demo
Made with: HTML, SCSS, Babel
22. CSS-GRID : Login Screen
Author: Sampath Paravasthu (SampathParavasthu)
Links: Source Code / Demo
Created on: July 14, 2020
Made with: HTML, SCSS
Tags: login-screen, css-grid, codepen-challenge, codepen, login-page
23. CSS Grid IOS Calculator Layout
Simple CSS Grid layout to show iOS calculator
Author: Tarah (Tarah-S)
Links: Source Code / Demo
Created on: July 10, 2020
Made with: HTML, SCSS
Tags: css-grid, ios-calculator, calculator-layout, calculator, css
24. CSS-GRID : UI Components
https://dribbble.com/shots/12872549-UI-Elements-Components-UX-UI-Design
Author: Sampath Paravasthu (SampathParavasthu)
Links: Source Code / Demo
Created on: July 8, 2020
Made with: HTML, SCSS, Babel
Tags: css-grid, flexbox, components, codepen-challenge, dailyui
25. Basic Responsive CSS Grid
Author: Jessica (JessMadeline)
Links: Source Code / Demo
Created on: June 29, 2020
Made with: HTML, Sass
Tags: css-grid, grid, css, layouts, ui
26. CSS Dark Grid
Author: Marcell Ciszek Druzynski (legionista1994)
Links: Source Code / Demo
Made with: HTML, CSS
27. Cards Layout With CSS Grid
Responsive cards layout with CSS Grid, using an SVG icon set. SVG icons by https://icons8.com/.
Author: Levente Molnar (leventemo)
Links: Source Code / Demo
Created on: June 18, 2020
Made with: HTML, SCSS
Tags: cards-layout, css-grid, reponsive, svg-icon-set
28. About Page With (CSS Grid)
Author: Felecia (wilkinsfelecia)
Links: Source Code / Demo
Created on: June 16, 2020
Made with: HTML, CSS
Tags: css-grid, css, html, about
29. Grid Of Avatars
Author: Rebecca Eilering (rebeccaeilering)
Links: Source Code / Demo
Created on: June 10, 2020
Made with: HTML, SCSS
Tags: cpc-user-uploaded, codepenchallenge, css-grid, css-animation
30. Responsive CSS Grid Page Layout
Author: Florian Strasser (flostrasser)
Links: Source Code / Demo
Created on: June 9, 2020
Made with: HTML, SCSS
Tags: css, grid, css-grid, responsive, layout
31. Asset Layout Contents
html and css forked from https://codepen.io/tutsplus/pen/qaJPKL
Author: Carl Tanner (captproton)
Links: Source Code / Demo
Created on: February 9, 2020
Made with: HTML, CSS
Tags: css-grid
32. Picasso - Advanced CSS Grid
Author: Camila Waz (camila_waz)
Links: Source Code / Demo
Created on: March 4, 2020
Made with: HTML, SCSS
Tags: css-grid, layout, landing-page
33. Responsive Feature Section Using Clip-Path
This responsive feature section uses clip-path on the image to turn a boxy layout into an angled layout. This is basically a mask over the image that hides a part of it.
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: March 5, 2020
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: clip-path, css, image, css-grid
34. CSS Grid Gallery
Author: J Gable (JapperCat)
Links: Source Code / Demo
Created on: March 15, 2020
Made with: HTML
Tags: css-grid, gallery
35. Layout 9 - CSS Grid Example
Author: Alexandra Caulea (alexandracaulea)
Links: Source Code / Demo
Created on: January 18, 2020
Made with: HTML, SCSS
Tags: css-grid
36. CSS Grid Poetry (:nth-child, :empty Selectors, Responsive Type)
Showcasing responsive CSS grid with auto-fill and responsive type. From my collection of rhymes, #RhymesForTryingTimes
Author: Tatiana Mac (tatianamac)
Links: Source Code / Demo
Created on: March 30, 2020
Made with: HTML, SCSS
Tags: responsive type, css-grid
37. Reverse Engineered Twitch.tv UI (Responsive CSS Grid Experiment)
Imagine a version of Twitch where you can stream AND upload gaming videos like let’s plays. This would help games get even more exposure through more creators! I decided to code a proof of concept for an upload feature on Twitch. This website is known for building solid communities. I thin...Read More
Author: Tee Diang (cybercountess)
Links: Source Code / Demo
Created on: April 4, 2020
Made with: HTML, CSS, JS
Tags: css-grid, twitch, gaming, responsive, grid
38. Art Directed Grid With BG Image
This art-directed grid uses a background image inside a CSS Grid container. Makes a cool effect that can bring in some color and highlight parts of the image you want users to focus on.
Author: Brian Haferkamp (brianhaferkamp)
Links: Source Code / Demo
Created on: April 7, 2020
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, css-grid, photo, grid
39. Heroes In The Spotlight: Women In STEM
Author: Stephanie Eckles (5t3ph)
Links: Source Code / Demo
Made with: HTML, SCSS
40. Responsive CSS Grid - Books
A "product grid" demo using CSS Grid Clip Path Conic Gradient Lea Verou's CSS conic-gradient() polyfill (https://leaverou.github.io/conic-gradient/conic-gradient.js) a colour palette taken from Jay Fletcher's lovely work on Dribbble (https://dribbble.com/shots/6509733-Bibelot-pt-II) TH...Read More
Author: Andy Barefoot (andybarefoot)
Links: Source Code / Demo
Created on: April 16, 2020
Made with: HTML, CSS, JS
Tags: css-grid, clip-path, conic-gradient
41. User Uploaded Images UI
Clean responsive CSS Grid experiment. Some of the avatars use Imgix focal and zoom properties.
Author: Sicontis (Sicontis)
Links: Source Code / Demo
Created on: April 28, 2020
Made with: HTML, SCSS, JS
Tags: cpc-user-uploaded, codpenchallenge, css-grid, responsive
More Awesome Lists:
Share: