· 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 website.

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

Demo & Download

Made With

HTML / CSS / React


Basic CSS Grid Layout

See the Pen CSS Grid Layout by MSEdgeDev (@MSEdgeDev) on CodePen.

Author

MSEdgeDev

Demo & Download

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

Demo & Download

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

Demo & Download

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

Demo & Download

Made With

HTML / CSS / Js


See the Pen CSS Grid Responsive Image Gallery by Stephanie (@ramenhog) on CodePen.

Author

Stephanie

Demo & Download

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

Demo & Download

Made With

Pug / SCSS / Js


Grid Newspaper Layout

See the Pen CSS Grid: Newspaper Layout by Olivia Ng (@oliviale) on CodePen.

Author

Olivia Ng

Demo & Download

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

Demo & Download

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

Demo & Download

Made With

HTML / Less / Js


Grid Layout with Calendar

See the Pen CSS grid calendar by Mert Cukuren (@knyttneve) on CodePen.

Author

Mert Cukuren

Demo & Download

Made With

Pug / SCSS


CSS Grid Tiles

See the Pen Understanding CSS Grid Systems by SitePoint (@SitePoint) on CodePen.

Author

SitePoint

Demo & Download

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+

Demo & Download

Made With

HTML / CSS / Js


See the Pen Image Gallery with CSS Grid & Flexbox by George W. Park (@GeorgePark) on CodePen.

Author

George W. Park

Demo & Download

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

Demo & Download

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

Demo & Download

Made With

HTML / CSS


Grid Layout Food Menu

See the Pen Grid Experiment No. 4 by Jules Forrest (@julesforrest) on CodePen.

Author

Jules Forrest

Demo & Download

Made With

HTML / SCSS


CSS Grid: Card Styles

See the Pen CSS Grid: Card Variations by Olivia Ng (@oliviale) on CodePen.

Author

Olivia Ng

Demo & Download

Made With

Pug / SCSS


CSS Grid: Magazine Layouts

See the Pen CSS Grid: Magazine Layouts by Olivia Ng (@oliviale) on CodePen.

Author

Olivia Ng

Demo & Download

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

Demo & Download

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

Demo & Download

Made With

HTML / SCSS


Grid Layout Reciept

See the Pen Grid Experiment No. 6 by Jules Forrest (@julesforrest) on CodePen.

Author

Jules Forrest

Demo & Download

Made With

HTML / CSS


CSS Grid Periodic Table

See the Pen CSS Grid: Periodic Table by Olivia Ng (@oliviale) on CodePen.

Author

Olivia Ng

Demo & Download

Made With

Pug / SCSS / Js


See the Pen Magnific Gallery V2 by Michal Niewitala 🍋 (@mican) on CodePen.

Author

Michal Niewitala

Demo & Download

Made With

Pug / SaSS / CoffeeScript


CSS Grid Gantt Chart

See the Pen CSS-Grid Gantt Chart by Phil (@ph1p) on CodePen.

Author

Phil

Demo & Download

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

Demo & Download

Made With

HTML / CSS / Js


Animated Zoom CSS Grid

See the Pen Animate CSS Grid by Alex (@aholachek) on CodePen.

Author

Alex

Demo & Download

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

Demo & Download

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

Demo & Download

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

Demo & Download

Made With

HTML / SCSS


Animated Hexagonal Grid Layout

See the Pen Auto Hexagonal CSS Grid Layout by Kseso (@Kseso) on CodePen.

Author

Kseso

Demo & Download

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

Demo & Download

Made With

HTML / CSS


CSS Grid Menu Panels

See the Pen CSS Grid Menu Panels by Ryan Mulligan (@hexagoncircle) on CodePen.

Author

Ryan Mulligan

Demo & Download

Made With

HTML / SCSS


Buildings with Grid Layout

See the Pen CSSCities by Adam Kuhn (@cobra_winfrey) on CodePen.

Author

Adam Kuhn

Demo & Download

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

Demo & Download

Made With

HTML / SCSS


Floating Grids Layouts

See the Pen Layout is overrated by Andy Barefoot (@andybarefoot) on CodePen.

Author

Andy Barefoot

Demo & Download

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

Demo & Download

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

Demo & Download

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

[email protected]

Demo & Download

Made With

HTML / CSS


Apple Keyboard Grid Design

See the Pen Apple Keyboard by Jon Kantner (@jkantner) on CodePen.

Author

Jon Kantner

Demo & Download

Made With

HTML / CSS / Js


Mutli-Stacked Grid Design

See the Pen CSS Grid Layout - New Terminology by Stacy (@stacy) on CodePen.

Author

Stacy

Demo & Download

Made With

HTML / SCSS


Grid Layout with Cards

See the Pen UI Cards by Curtis Lee (@that_boy_curt) on CodePen.

Author

Curtis Lee

Demo & Download

Made With

Pug / CSS


Monopoly board Grids

See the Pen Monopoly board by John Coppola (@johnnycopes) on CodePen.

Author

John Coppola

Demo & Download

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

Demo & Download

Made With

HTML / SCSS


Material UI Grid Layout

See the Pen Digital Walls by Max Böck (@mxbck) on CodePen.

Author

Max Böck

Demo & Download

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

Demo & Download

Made With

Pug / SCSS


Responsive CSS Grid Books

See the Pen Responsive CSS Grid - Books by Andy Barefoot (@andybarefoot) on CodePen.

Author

Andy Barefoot

Demo & Download

Made With

HTML / CSS


Stacked Grid Design

See the Pen maCSSonry grid layout by @kseso by Kseso (@Kseso) on CodePen.

Author

Kseso

Demo & Download

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

Demo & Download

Made With

HTML / SCSS


MARVEL POSTER CSS GRID

See the Pen MARVEL POSTER [CSS GRID] by Dannie Vinther (@dannievinther) on CodePen.

Author

Dannie Vinther

Demo & Download

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

Demo & Download

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

Demo & Download

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

Demo & Download

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

Demo & Download

Made With

Pug / CSS / Js


See the Pen React & CSS Grid Image Gallery by Tobi Weinstock (@tvweinstock) on CodePen.

Author

Tobi Weinstock

Demo & Download

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

Demo & Download

Made With

HTML / CSS


CSS Grid Calendar

See the Pen CSS Grid calendar by Adrià (@afontcu) on CodePen.

Author

Adrià

Demo & Download

Made With

HTML / CSS


Grid Layout Poster

See the Pen CSS Grid Poster by jakob-e (@jakob-e) on CodePen.

Author

jakob-e

Demo & Download

Made With

Pug / SCSS


CSS Grid Makeup Palettes

See the Pen CSS Grid: Makeup Palettes by Olivia Ng (@oliviale) on CodePen.

Author

Olivia Ng

Demo & Download

Made With

Pug / SCSS


Arranged Grid Design

See the Pen CSS Grid Layout + Mondrian = <3 by Toaster (@ToasterCo) on CodePen.

Author

Toaster

Demo & Download

Made With

HTML / CSS / Js


Simple Grid Layout Design

See the Pen CSS Grid Layout Demo by Stacy (@stacy) on CodePen.

Author

Stacy

Demo & Download

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

Demo & Download

Made With

HTML / SCSS


See the Pen Responsive Photo Gallery Grid with Lightbox and - No Script by Majed (@alchatti) on CodePen.

Author

Majed

Demo & Download

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

Demo & Download

Made With

HTML / CSS


CSS Grid Bullet Journal

See the Pen CSS Grid: Bullet Journal by Olivia Ng (@oliviale) on CodePen.

Author

Olivia Ng

Demo & Download

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

Demo & Download

Made With

HTML / SCSS / Js


Simple Grid Calendar

See the Pen CSS Grid: Calendar by Olivia Ng (@oliviale) on CodePen.

Author

Olivia Ng

Demo & Download

Made With

Pug / SCSS


Grid Article Design

See the Pen Grid Experiment No. 3 by Jules Forrest (@julesforrest) on CodePen.

Author

Jules Forrest

Demo & Download

Made With

HTML / CSS


Articulation Grid Pieces

See the Pen Articulation Pieces by Al Boardman by kittons (@airnan) on CodePen.

Author

kittons

Demo & Download

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

Demo & Download

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

Demo & Download

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

Demo & Download

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

Demo & Download

Made With

HTML / SCSS / Js


Share:
Back to Blog