Thecuriouscorp· 22 min read
75 CSS Grid Layout Examples
CSS Grids Layouts are an amazing way to create different unique layouts in a grid pattern. Be it simple or complex, grids can be used according to your advantage. You can use a grid system for displaying content, images, or widgets as well.
Here is a curated list of many different implementations of Grid System in web design, that will inspire you to create your own.
CSS Grid Template Builder
See the Pen CSS Grid Template Builder by Anthony Dugois (@anthonydugois) on CodePen.
Author
Anthony Dugois
Link
Made With
HTML / CSS / React
Basic CSS Grid Layout
See the Pen CSS Grid Layout by MSEdgeDev (@MSEdgeDev) on CodePen.
Author
MSEdgeDev
Link
Made With
HTML / CSS / Js
Floating CSS Grid Elements
See the Pen Hamburger icon with Morphing Menu by Sergio Andrade (@sergioandrade) on CodePen.
Author
Sergio Andrade
Link
Made With
HTML / SCSS / Js
3D Perspective CSS Grid
See the Pen Isometric eCommerce CSS Grid by Andy Barefoot (@andybarefoot) on CodePen.
Author
Andy Barefoot
Link
Made With
HTML / CSS
CSS Grid Layout with Shadow
See the Pen CSS Grid Layout - Basic Grid by Mozilla Developers (@mozilladevelopers) on CodePen.
Author
Mozilla Developers
Link
Made With
HTML / CSS / Js
CSS Grid Responsive Image Gallery
See the Pen CSS Grid Responsive Image Gallery by Stephanie (@ramenhog) on CodePen.
Author
Stephanie
Link
Made With
HTML / SCSS
Grid Layout with CSS Styling
See the Pen CSS Grid: Style Guide by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS / Js
Grid Newspaper Layout
See the Pen CSS Grid: Newspaper Layout by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS / Js
CSS Grid Layout Floor Plan
See the Pen CSS Grid: Floor Plan by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS / Js
Geometric Card with CSS Grid
See the Pen Geometric business card with CSS Grid by Liz Wendling (@Elwend) on CodePen.
Author
Liz Wendling
Link
Made With
HTML / Less / Js
Grid Layout with Calendar
See the Pen CSS grid calendar by Mert Cukuren (@knyttneve) on CodePen.
Author
Mert Cukuren
Link
Made With
Pug / SCSS
CSS Grid Tiles
See the Pen Understanding CSS Grid Systems by SitePoint (@SitePoint) on CodePen.
Author
SitePoint
Link
Made With
HTML / CSS / Js
Using Grid For Column Ordering
See the Pen Using CSS `grid` (order) for Column Ordering by Envato Tuts+ (@tutsplus) on CodePen.
Author
Envato Tuts+
Link
Made With
HTML / CSS / Js
Image Gallery with CSS Grid Flexbox
See the Pen Image Gallery with CSS Grid & Flexbox by George W. Park (@GeorgePark) on CodePen.
Author
George W. Park
Link
Made With
HTML / CSS / Js
CSS Grid: Train Ticket
See the Pen CSS Grid: Train Ticket by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS
CSS Grid Layout with Flex-box Fallback
See the Pen CSS Grid Layout with @support flexbox fallback by Gustaf Holm (@primalivet) on CodePen.
Author
Gustaf Holm
Link
Made With
HTML / CSS
Grid Layout Food Menu
See the Pen Grid Experiment No. 4 by Jules Forrest (@julesforrest) on CodePen.
Author
Jules Forrest
Link
Made With
HTML / SCSS
CSS Grid: Card Styles
See the Pen CSS Grid: Card Variations by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS
CSS Grid: Magazine Layouts
See the Pen CSS Grid: Magazine Layouts by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS / Js
Responsive Navbar Using CSS Grid Flexbox
See the Pen Responsive Navbar Using CSS Grid/Flexbox by Reggie Bowers (@bowersrd) on CodePen.
Author
Reggie Bowers
Link
Made With
HTML / CSS / Js
Multiple Stacked Grid Layout
See the Pen CSS Grid Layout with grid-template-columns: repeat(); by Stacy (@stacy) on CodePen.
Author
Stacy
Link
Made With
HTML / SCSS
Grid Layout Reciept
See the Pen Grid Experiment No. 6 by Jules Forrest (@julesforrest) on CodePen.
Author
Jules Forrest
Link
Made With
HTML / CSS
CSS Grid Periodic Table
See the Pen CSS Grid: Periodic Table by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS / Js
Image Gallery Stacked Grid Layout
See the Pen Magnific Gallery V2 by Michal Niewitala 🍋 (@mican) on CodePen.
Author
Michal Niewitala
Link
Made With
Pug / SaSS / CoffeeScript
CSS Grid Gantt Chart
See the Pen CSS-Grid Gantt Chart by Phil (@ph1p) on CodePen.
Author
Phil
Link
Made With
HTML / SCSS
Grid with Photos and Blog Posts
See the Pen CSS Grid Masonry (Step 10) by Andy Barefoot (@andybarefoot) on CodePen.
Author
Andy Barefoot
Link
Made With
HTML / CSS / Js
Animated Zoom CSS Grid
See the Pen Animate CSS Grid by Alex (@aholachek) on CodePen.
Author
Alex
Link
Made With
HTML / SCSS / Js
Grid Layout Blog Structure
See the Pen CSS Grid Layout - Template Areas by Mozilla Developers (@mozilladevelopers) on CodePen.
Author
Mozilla Developers
Link
Made With
HTML / CSS / Js
CSS Grid with Excel Spreadsheet
See the Pen CSS Grid: Excel Spreadsheet by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS
Pure CSS Crossword Grid
See the Pen Pure CSS crossword - CSS Grid by Adrian Roworth (@adrianroworth) on CodePen.
Author
Adrian Roworth
Link
Made With
HTML / SCSS
Animated Hexagonal Grid Layout
See the Pen Auto Hexagonal CSS Grid Layout by Kseso (@Kseso) on CodePen.
Author
Kseso
Link
Made With
HTML / CSS
Image Mask with Grid System
See the Pen Using CSS Grid as a mask by Andy Barefoot (@andybarefoot) on CodePen.
Author
Andy Barefoot
Link
Made With
HTML / CSS
CSS Grid Menu Panels
See the Pen CSS Grid Menu Panels by Ryan Mulligan (@hexagoncircle) on CodePen.
Author
Ryan Mulligan
Link
Made With
HTML / SCSS
Buildings with Grid Layout
See the Pen CSSCities by Adam Kuhn (@cobra_winfrey) on CodePen.
Author
Adam Kuhn
Link
Made With
HTML / SCSS / Js
CSS Grid Magazine Layout
See the Pen CSS Grid Layout Module - Responsive Magazine Layout by Heather Buchel (@hbuchel) on CodePen.
Author
Heather Buchel
Link
Made With
HTML / SCSS
Floating Grids Layouts
See the Pen Layout is overrated by Andy Barefoot (@andybarefoot) on CodePen.
Author
Andy Barefoot
Link
Made With
HTML / CSS / Js
Instagram Profile Layout with CSS Grid & Flexbox
See the Pen Instagram Profile Layout with CSS Grid & Flexbox by George W. Park (@GeorgePark) on CodePen.
Author
George W. Park
Link
Made With
HTML / CSS / Js
Horizontal Click and Drag Scrolling Grid
See the Pen Horizontal Click and Drag Scrolling with JS by ToddWebDev (@toddwebdev) on CodePen.
Author
ToddWebDev
Link
Made With
HTML / SCSS / Js
Easy Responsive Fluid Grid Layout
See the Pen Easy Responsive CSS Grid Layout, Version 1b: Fluid Content Fixed Sidebar by [email protected] (@stanislas-prime) on CodePen.
Author
Link
Made With
HTML / CSS
Apple Keyboard Grid Design
See the Pen Apple Keyboard by Jon Kantner (@jkantner) on CodePen.
Author
Jon Kantner
Link
Made With
HTML / CSS / Js
Mutli-Stacked Grid Design
See the Pen CSS Grid Layout - New Terminology by Stacy (@stacy) on CodePen.
Author
Stacy
Link
Made With
HTML / SCSS
Grid Layout with Cards
See the Pen UI Cards by Curtis Lee (@that_boy_curt) on CodePen.
Author
Curtis Lee
Link
Made With
Pug / CSS
Monopoly board Grids
See the Pen Monopoly board by John Coppola (@johnnycopes) on CodePen.
Author
John Coppola
Link
Made With
HTML / SCSS
Comic Book Style layout with CSS Grid
See the Pen Comic book style layout with CSS Grid by Aysha Anggraini (@rrenula) on CodePen.
Author
Aysha Anggraini
Link
Made With
HTML / SCSS
Material UI Grid Layout
See the Pen Digital Walls by Max Böck (@mxbck) on CodePen.
Author
Max Böck
Link
Made With
HTML / SCSS / Js
Responsive Timeline Grid
See the Pen Responsive Timeline using CSS Grid & Grid Template Areas( Pug, Sass, Description List) by Dianna Cheng (@girlgeek) on CodePen.
Author
Dianna Cheng
Link
Made With
Pug / SCSS
Responsive CSS Grid Books
See the Pen Responsive CSS Grid - Books by Andy Barefoot (@andybarefoot) on CodePen.
Author
Andy Barefoot
Link
Made With
HTML / CSS
Stacked Grid Design
See the Pen maCSSonry grid layout by @kseso by Kseso (@Kseso) on CodePen.
Author
Kseso
Link
Made With
HTML / CSS
Landing Page Grid CSS Design
See the Pen Full-bleed layout with fixed-width content by Morten Rand-Hendriksen (@mor10) on CodePen.
Author
Morten Rand-Hendriksen
Link
Made With
HTML / SCSS
MARVEL POSTER CSS GRID
See the Pen MARVEL POSTER [CSS GRID] by Dannie Vinther (@dannievinther) on CodePen.
Author
Dannie Vinther
Link
Made With
HTML / CSS / Js
CSS Grid in Three Planes
See the Pen Isometric CSS Grid experiment in three planes by Andy Barefoot (@andybarefoot) on CodePen.
Author
Andy Barefoot
Link
Made With
HTML / CSS
Mouse Hover Calendar (CSS Grid)
See the Pen Wim Crouwel's Calendar (CSS Grid) by Good Praxis / Chris (@droom) on CodePen.
Author
Good Praxis / Chris
Link
Made With
Pug / SaSS / Js
CSS Grid Layout Animation
See the Pen CSS Grid Layout: Animation by Manuel Matuzovic (@matuzo) on CodePen.
Author
Manuel Matuzovic
Link
Made With
HTML / CSS / Js
Multiple Elements in Grid Style
See the Pen CSS Grid: Style Guide II by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / CSS / Js
React Grid Image Gallery
See the Pen React & CSS Grid Image Gallery by Tobi Weinstock (@tvweinstock) on CodePen.
Author
Tobi Weinstock
Link
Made With
HTML / SCSS / React
Easy Responsive CSS Grid Layout
See the Pen Easy Responsive CSS Grid Layout, Version 2b: 1 to 4 to 8 by [email protected] (@stanislas-prime) on CodePen.
Author
Stanislav Protasevich
Link
Made With
HTML / CSS
CSS Grid Calendar
See the Pen CSS Grid calendar by Adrià (@afontcu) on CodePen.
Author
Adrià
Link
Made With
HTML / CSS
Grid Layout Poster
See the Pen CSS Grid Poster by jakob-e (@jakob-e) on CodePen.
Author
jakob-e
Link
Made With
Pug / SCSS
CSS Grid Makeup Palettes
See the Pen CSS Grid: Makeup Palettes by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS
Arranged Grid Design
See the Pen CSS Grid Layout + Mondrian = <3 by Toaster (@ToasterCo) on CodePen.
Author
Toaster
Link
Made With
HTML / CSS / Js
Simple Grid Layout Design
See the Pen CSS Grid Layout Demo by Stacy (@stacy) on CodePen.
Author
Stacy
Link
Made With
HTML / SCSS
Layouts with Different Grid Gap
See the Pen CSS Grid Layout Demo 5 - Grid Gap by Stacy (@stacy) on CodePen.
Author
Stacy
Link
Made With
HTML / SCSS
Photo Gallery Grid Design with Blur
See the Pen Responsive Photo Gallery Grid with Lightbox and - No Script by Majed (@alchatti) on CodePen.
Author
Majed
Link
Made With
Pug / SCSS
Overlapping Header with CSS Grid
See the Pen Overlapping Header with CSS Grid by Jonathan Snook (@snookca) on CodePen.
Author
Jonathan Snook
Link
Made With
HTML / CSS
CSS Grid Bullet Journal
See the Pen CSS Grid: Bullet Journal by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS
Task Manager UI with CSS Grid
See the Pen Task Manager UI with CSS Grid by Aysenur Turk (@TurkAysenur) on CodePen.
Author
Aysenur Turk
Link
Made With
HTML / SCSS / Js
Simple Grid Calendar
See the Pen CSS Grid: Calendar by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS
Grid Article Design
See the Pen Grid Experiment No. 3 by Jules Forrest (@julesforrest) on CodePen.
Author
Jules Forrest
Link
Made With
HTML / CSS
Articulation Grid Pieces
See the Pen Articulation Pieces by Al Boardman by kittons (@airnan) on CodePen.
Author
kittons
Link
Made With
HTML / CSS / Js
CSS Grid Form
See the Pen CSS Grid: Form to Badge by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS / Js
CSS Grid Product Catalog
See the Pen CSS Grid: Product Catalog by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS / Js
CSS Grid Restaurant Website
See the Pen CSS Grid: Restaurant Website by Olivia Ng (@oliviale) on CodePen.
Author
Olivia Ng
Link
Made With
Pug / SCSS / Js
Scroll To Sticky Grid Layout
See the Pen The Future Belongs to CSS by Josh Collinsworth (@joshuajcollinsworth) on CodePen.
Author
Josh Collinsworth
Link
Made With
HTML / SCSS / Js