10 Creative Examples of CSS Grid in Action

CSS Grid is generating lots of hype – and for good reason. It’s poised to revolutionize the way we create complex layouts. The new specification (still in draft as of this writing) 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.

While browser support is generally limited to very recent versions, full support will be coming down the line. With that, many folks are already experimenting with CSS Grid in some unique ways. Here are 10 layouts we found that range anywhere from “useful” to “wow”. We’ll also share a link to each layout on CodePen so that you can do your own experimentation.

Auto Hexagonal CSS Grid Layout

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 (@Kseso)

Responsive Periodic Table with CSS Grids

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 (@dudleystorey)

CSS Grid Layout with @support flexbox fallback

Here’s a layout that is quite useful in real world situations. It’s also nice to see a Flexbox fallback solution as that may be 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 (@primalivet)

Wim Crouwel’s Calendar (CSS Grid)

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 Chris Droom (@droom)

CSS Grid Layout Module – Responsive Magazine Layout

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 (@hbuchel)

CSS Grid Layout – Blog Post Template

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 (@stacy)

CSS Grid Poster

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

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

GRID PILE: Stacking CSS Grids for Impossible Layouts

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 (@mor10)

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

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. Mind officially blown.

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

React & CSS Grid Image Gallery

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 (@tvweinstock)

Get on the Grid

Part of the challenge web designers face is manipulating code in order 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 are examples of just how flexible CSS Grid is and how relatively little code is required to build even intricate layouts. Now that you’ve seen what CSS Grid can do, get out there and use it to turn your ideas into something cool.

The post 10 Creative Examples of CSS Grid in Action appeared first on Speckyboy Design Magazine.