45+ CSS Grid Examples - Free Code + Demos

"Well, this should be easy enough..." It was not.

Image sprite for icons and things are not clickable/functional because I want to maintain my sanity :D

Train ticket to Hogwarts, with a flat design twist!

When you can't afford to buy a Moleskine and nice stationery for bullet journaling, so you code it up instead 😂

My first time using gridinside flex, instead of the other way around 😱

those github contributions tho

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

This is a small gantt chart with css-grid.

Just another CSS grid demo. This time, it’s an interactive Apple USB keyboard (without the cable). Update 6/7/18: reduced JS code

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

Recreation of a print menu from The Phoenicia Diner in Phoenicia, NY using 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

Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.

Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.

Having fun with CSS Grid and Clip-path :)

The final demo. Read the full tutorial for more details.

This is Tribute Page about Chekhov created by Firdavs Gafurjonov for freeCodeCamp's Responsive Web Design Project

https://dribbble.com/shots/13580099/attachments/5184517?mode=media

Simple CSS Grid layout to show iOS calculator

https://dribbble.com/shots/12872549-UI-Elements-Components-UX-UI-Design

Responsive cards layout with CSS Grid, using an SVG icon set. SVG icons by https://icons8.com/.

html and css forked from https://codepen.io/tutsplus/pen/qaJPKL

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.

Showcasing responsive CSS grid with auto-fill and responsive type. From my collection of rhymes, #RhymesForTryingTimes

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

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.

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

Clean responsive CSS Grid experiment. Some of the avatars use Imgix focal and zoom properties.