13 Cool Simple CSS Grid layout examples

By | April 13, 2021

Collection of free hand-picked simple CSS grid examples. Also, it includes a bunch of front-end techniques, tips, and tricks for your future reference. Hope you will like these freebies and find them useful. Happy coding!

See the Pen Styling the last row of a grid with CSS selectors by Keith Clark (@keithclark) on CodePen.

Author

  • Keith Clark
  • February 13, 2014

Link

Made with

  • Haml / CSS

About the Code

Styling the last row of a grid with CSS selectors

How to style the last row of a grid without knowing the number of elements it will contain using CSS selector trickery.

More info: Link

Dependency:


See the Pen Grid Animation Effects by Trang Si Hung (@trangsihung) on CodePen.

Author

  • Trang Si Hung
  • January 17, 2014

Link

Made with

  • HTML / CSS / JavaScript

About the Code

Grid Animation Effects

small and simple walkthrough showcasing the usage of jQuery .delay(), jQuery easing plugin, and CSS3 transforms to animate some thumbnails in a grid.

On clicking the animate button the thumbnails disappear randomly with a ripple effect and quickly storm back in from the left in a cool 3D way.

More info: Link

Dependency:


See the Pen Simple grid mixin by Aleksandar Gosevski (@goschevski) on CodePen.

Author

  • Aleksandar Gosevski
  • March 13, 2014

Link

Made with

  • HTML / SCSS

About the Code

Simple grid mixin

This grid is possible to:

  • be responsive
  • have paddings
  • vertically center columns
  • stay fluid on small resolutions
  • kill paddings on the first and last column

More info: Link

Dependency:


See the Pen Simple Grid CSS Grid by Paul Maloney (@paulmaloney) on CodePen.

Author

  • Paul Maloney
  • June 27, 2018

Link

Made with

  • HTML / CSS

About the Code

Simple Grid CSS Grid

This is a really simple CSS only grid using CSS Table Display. The plan was to make it as lightweight as possible whilst keeping it responsive.

More info: Link

Dependency:


See the Pen Simple CSS Grid Hover by Boomer (@CodeBoomer) on CodePen.

Author

  • Boomer
  • August 25, 2016

Link

Made with

  • HTML / Sass

About the Code

Simple CSS Grid Hover

A simple grid hover effect with > 50FPS for entire cycle.

For this effect, multiple box-shadows are applied to the :before pseudo element of the grid item to give a sence of depth. To ensure we achieve performant transitions, we don’t want to animate the box-shadow but instead the opacity of the :before pseudo element.

We also translateY the grid-item a desired amount (depending on size of grid-item) and add this transition to the hover state. I use a SASS mixin to account for 3D translates where possible, hense I don’t specifically use translateY.

The combined effect of the ‘lifting’ grid-item as well as the box-shadows, gives a pretty neat, yet simple 3D-like effect. Most importantly, you get near 60FPS. If you add scale effects or choose to animate the box-shadow, the effect is better but you risk janky animations on mid to lower-end computers without a GPU.

The secret sauce here is adding multiple box-shadows to give the desired depth effect to meet your need. If you have images on the grid, you will want to darken the shadows more.

More info: Link

Dependency:


See the Pen Simple css Grid – Responsive by Jermbo (@jermbo) on CodePen.

Author

  • Jermbo
  • February 13, 2015

Link

Made with

  • Pug / Less

About the Code

Simple css Grid – Responsive

Everywhere I looked there are a ton of grid systems out there. Some of them are really nice. I wanted something short simple and to the point. This isn’t meant to be something crazy robust or used by everyone. For a lot of the sites, I build I have to create my own grid system every time, so I figured I would do some math and utilize the power of a preprocessor.

More info: Link

Dependency:


See the Pen css Grid system by Alex (@VoloshchenkoAl) on CodePen.

Author

  • Alex
  • May 12, 2020

Link

Made with

  • HTML / SCSS

About the Code

Simple css grid system using scss

Can create your grid system with another number of columns simply change $numColumns in SCSS

More info: Link

Dependency:


See the Pen CSS variables simple css grid by Chmood (@Chmood) on CodePen.

Author

  • Chmood
  • November 17, 2016

Link

Made with

  • HTML / SCSS

About the Code

CSS variables simple CSS grid

More info: Link

Dependency:


See the Pen Super Simple CSS Grid by Stacy(@stacy) on CodePen.

Author

  • Stacy
  • September 11, 2014

Link

Made with

  • HTML / SCSS

About the Code

Super Simple CSS Grid

This is a very basic grid controlled only by CSS. It keeps the HTML more semantic and if your page templates are fairly basic then it may be the perfect grid for you .

More info: Link

Dependency:


See the Pen 3D Grid UI by carvadraws (@acarva1) on CodePen.

Author

  • carvadraws
  • March 25, 2018

Link

Made with

  • HTML / SCSS / JavaScript

About the Code

3D Grid UI

Testing a simple grid system using a skewed table. Try holding Ctrl or Shift.

More info: Link

Dependency:


See the Pen Aspect ratio Grid boxes with CSS Variables by Michelle Barker (@michellebarker) on CodePen.

Author

  • Michelle Barker
  • September 21, 2016

Link

Made with

  • HTML / SCSS

About the Code

Aspect ratio Grid boxes with CSS Variables

I noticed that using the CSS aspect ratio hack was causing weird behaviour with CSS Grid (when I needed all boxes to be the same aspect ratio but fill different numbers of rows / columns) so this is a solution with CSS Variables and a sprinkling of calc() instead

More info: Link

Dependency:


See the Pen Simple grid system by Luiz Otávio Miranda Figueiredo (@luizomf) on CodePen.

Author

  • Luiz Otávio Miranda Figueiredo
  • August 30, 2014

Link

Made with

  • HTML / CSS

About the Code

Simple grid system

CSS Grid System

More info: Link

Dependency:


See the Pen Simple Grid template by Nicolas Tilly (@nicolastilly) on CodePen.

Author

  • Nicolas Tilly
  • October 23, 2019

Link

Made with

  • HTML / CSS

About the Code

Simple Grid template

Simple Grid

More info: Link

Dependency:

Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.