10 CSS Grid Snippets for Creating Unique Layouts

CSS Grid has generated lots of hype – and for a good reason. It has revolutionized the way we create complex layouts. The specification removes the need for all the silly hacks designers have had to put in place while building grid systems.

The promise of CSS Grid is that it will simply work as the designer intended, while automatically adjusting to whatever device it’s being displayed on.

Many web designers have experimented with CSS Grid in many unique ways. Here are 10 layouts we found that range anywhere from “useful” to “wow.”

Auto Hexagonal CSS Grid Layout by Kseso

This is definitely one of the more unique examples of how CSS Grid can help us accomplish something that may have been darn-near impossible in the past. Even more impressive is that this interface was built with less than 150 lines of CSS.

See the Pen Auto Hexagonal CSS Grid Layout by Kseso

Responsive Periodic Table with CSS Grid by Dudley Storey

While probably not useful (in its current form) to the average designer, this grid is a prime example of the amount of detail that can be achieved with relatively little code. Again, this layout is pure CSS and less than 150 lines.

See the Pen Responsive Periodic Table with CSS Grids by Dudley Storey

CSS Grid Layout with @support Flexbox Fallback by Gustaf Holm

Here’s a layout that is quite useful in real-world situations. It’s also nice to see a Flexbox fallback solution as part of the price we pay for using CSS Grid for some time.

See the Pen CSS Grid Layout with @support flexbox fallback by Gustaf Holm

Wim Crouwel’s CSS Grid Calendar by Good Praxis

Wim Crouwel is a Dutch graphic designer known for using grid-based layouts. It’s quite appropriate, then, to recreate one of his most famous works using a whole new type of grid.

See the Pen Wim Crouwel’s Calendar (CSS Grid) by Good Praxis / Chris

CSS Grid Layout Module – Responsive Magazine Layout by Heather Buchel

Magazine layouts are always a popular pick, and CSS Grid is the perfect way to achieve this kind of look. The best part here is there are no hacks needed.

See the Pen CSS Grid Layout Module – Responsive Magazine Layout by Heather Buchel

CSS Grid Layout – Blog Post Template by Stacy

Here’s a simple 3-column blog post layout that provides a flexbox fallback. It’s exceptionally lightweight and has lots of styling potential.

See the Pen CSS Grid Layout – Blog Post Template by Stacy

CSS Grid Poster by jakob-e

This poster layout shows the potential for using CSS Grid in combination with CSS animations. Coming in at around 200 lines of CSS, this example looks incredibly intricate.

See the Pen CSS Grid Poster by jakob-e

Stacking CSS Grids for Impossible Layouts by Morten Rand-Hendriksen

This layout achieves the web designer’s Holy Grail: Equal height columns with no clearfixes or other hacks. The future is now!

See the Pen GRID PILE:Stacking CSS Grids for Impossible Layouts by Morten Rand-Hendriksen

CSS Grid Layout and Comics (as Explained by Barry the Cat) by Envato Tuts+

One of the frustrations of CSS is that things that look like they should be simple rarely are. This cute comic utilizes CSS Grid and SVG graphics to actually achieve simplicity.

See the Pen CSS Grid Layout and Comics (as Explained by Barry the Cat) by Envato Tuts+

React & CSS Grid Image Gallery by Tobi Weinstock

Here is a beautifully responsive photo gallery that combines React and CSS Grid. This shows us that galleries can look great, function perfectly, and load quickly.

See the Pen React &CSS Grid Image Gallery by Tobi Weinstock

Get on the Grid

Part of the challenge web designers face is manipulating code to make their creative ideas come to life. You often have to be just as creative in finding hacks and fallbacks as you are in creating concepts. CSS Grid can be a big help in alleviating some of that burden.

Instead of wasting time with workarounds or abandoning ideas because you’re unsure if they’re doable, this new way to create layouts will let you focus on just making it happen.

The experiments above illustrate just how flexible CSS Grid can be and how relatively little code is required to build intricate layouts. So now that you’ve seen what CSS Grid can do, get out there and use it to turn your ideas into something amazing.

More CSS Snippets for Layouts