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.
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.
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.
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.
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.
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.
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.
- Fun Examples of CSS Imitating Print Design
- 8 Code Snippets That Demonstrate the Power of CSS Grid
- 10 Examples of Unorthodox Shapes Created with CSS
- Our 100 Favorite CSS Libraries, Frameworks and Tools for 2019
- 10 Handy CSS Grid Code Snippets
- The 10 Most Popular Open Source Front-End Web UI Kits
- 10 Code Snippets for Creating Masonry Grid Layouts
- Better Layouts Through CSS Flexbox