8 Common Website Layouts Built with CSS Grid

HTML Templates
Email Templates
Admin Templates
WordPress Themes
WordPress Plugins
Mockup Templates

Discovering the “Holy Grail” of Layouts

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.

Pick a Card UI

Card layout UIs are kind of 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.

Responsive Multi-column Blog

Here’s an attractive multi-column blog layout that nicely implements whitespace. Each article has its own 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.

Product Feature List

This layout is commonly seen in print, but is also a great choice for the web as well. A lovely product image is flanked by feature listings 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.

Nested Grid Page Layout

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.

Variable Width Content

Here’s a common wish for designers: keeping 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.

Pretty Pricing Tables

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.

Masonry Photo Gallery

Remember when building a masonry grid used to require the assistance of JavaScript? 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.

Create Beautiful Layouts with CSS Grid

CSS Grid was created not only to do extraordinary things — it 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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store