Among the many benefits of CSS Grid is its ability to create complex layouts with ease. You don’t need an excessive amount of code. No precarious hacks are required. A few relatively simple lines can help you quickly achieve something that used to take hours.
Of course, CSS Grid is also incredibly powerful. We’ve seen some developers experiment and push the limits of what it can do.
While that’s impressive, the real beauty of this specification is that it helps us accomplish everyday tasks. The common page and feature layouts that make up a typical website project, and this is the biggest reason to jump on board and utilize CSS Grid.
We’ve put together a collection of 8 common website layout concepts. Each one demonstrates how CSS Grid can make life easier for web designers. And, if you’re concerned about browser support, some also include fallbacks for Flexbox and other layout techniques. Let’s get started!
Discovering the “Holy Grail” of Layouts by Chris Coyier
At first glance, this “Holy Grail” layout may not look too difficult. In fact, we’ve been seeing it for years. The issue has always been that the available CSS layout methods weren’t very effective at setting it up.
It has traditionally taken any number of hacks to get it just right. Not so with CSS Grid. CSS-Tricks put together a companion article on the process.
See the Pen Holy Grail Layout with Grid by Chris Coyier
Pick a Card UI by Olivia Ng
Card layout UIs are a big deal these days. And there are so many different ways to make them unique. This set of examples shows how CSS Grid can take the same HTML markup and create completely different looks.
See the Pen CSS Grid: Card Variations by Olivia Ng
Responsive Multi-column Blog with CSS Grid by Sheelah Brennan
Here’s an attractive multi-column blog layout that nicely implements whitespace. Each article has room to shine. Plus, it adapts to small screens without a hitch.
This layout is also easy to expand, with more columns and rows just a few attribute tweaks (grid-template-columns
, grid-template-rows
) away.
See the Pen Grid-Based Blog Index Page Layout 🌷 by Sheelah Brennan
Product Feature List with CSS Grid by Brian Haferkamp
This layout is commonly seen in print, but is also a great choice for the web as well. Feature listings flank a lovely product image on either side. Each “feature” is a part of a UL element.
Where CSS Grid really provides an extra boost is in its responsiveness. On smaller viewports, the features are tucked neatly underneath the photo. Go a bit larger (say, a tablet), and the features are pushed over to the right.
See the Pen Center Focus Feature Section // CSS Grid by Brian Haferkamp
Nested CSS Grid Page Layout by Vincent Humeau
Perfect for an online magazine or news-based website, this nested grid layout is quite detailed. And we’re not just talking about its impressive looks.
Scroll down, and you’ll find a fantastic guide to how the layout was built, along with explanations of the different CSS Grid attributes that are utilized.
See the Pen CSS (SCSS) grid with grid layout and fallback to flexbox by Vincent Humeau
Variable Width Content with CSS Grid by Philipp
Here’s a common wish for designers: keeping the text in a narrow column (great for legibility) while allowing other media to expand beyond those restraints. CSS Grid helps take the pain out of this layout by looking for specific HTML tags and setting them free.
See the Pen Article Layout with Varying Content Width Using CSS Grid by Philipp
CSS Grid Pretty Pricing Tables by darkos
Multi-column features such as pricing tables are often created with CSS Flexbox.
So, why use Grid? For one, adjusting your styles for additional columns is a breeze. It’s a solid way to prepare for ever-changing content needs.
See the Pen Simple CSS Grid Layout Pricing Tables by darkos
Masonry Photo Gallery with CSS Gridby Stephanie
Remember when building a masonry grid used to require the assistance of JavaScript? There is no need for the extra bloat here, as CSS Grid can do the job. This snippet shows you how to create a beautiful and responsive layout. In addition to housing images, it could also work well as a blog index page.
See the Pen CSS Grid Responsive Image Gallery by Stephanie
Create Beautiful Layouts with CSS Grid
CSS Grid was created to do extraordinary things and was also built to easily solve more common layout challenges. For instance, none of the items in our collection is particularly exotic. They are all features you would see on blogs and corporate websites.
However, this specification does make them both easier to build and more flexible to maintain. Its properties allow you to quickly create them and make additions as necessary.
Related Posts
- 8 Code Snippets That Demonstrate the Power of CSS Grid
- 10 CSS Snippets for Creating Unorthodox Shapes
- Fun Examples of CSS Imitating Print Design
- Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019
- 10 Handy CSS Grid Code Snippets
- 8 CSS & JavaScript Snippets for Creating Modern Blog Layouts
- 10 CSS & JavaScript Snippets for Creating the Parallax Scrolling Effect
- 8 CSS & JavaScript Snippets for Creating Testimonial UI Sections
- 10 CSS Grid Snippets for Creating Unique Layouts
- 8 CSS Snippets for Creating Split-Screen Layouts