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
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.
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 part of the price we pay for using CSS Grid for some time.
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.
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 CSS 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!
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.
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 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.
- 10 Examples of Unorthodox Shapes Created with CSS
- 8 Code Snippets That Demonstrate the Power of CSS Grid
- How Modernizr Can Help You Implement CSS Fallbacks
- 8 Common Website Layouts Built with CSS Grid
- Fun Examples of CSS Imitating Print Design
- Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019
- Our 100 Favorite CSS Libraries, Frameworks and Tools from 2018
- 10 Handy CSS Grid Code Snippets
- 8 CSS Snippets for Creating Split-Screen Layouts
- 20 Responsive & Lightweight CSS Frameworks Worth Considering