Speckyboy RSS: 8 Common Website Layouts Built with CSS Grid

Your latest Speckyboy content is here!.

Speckyboy Design Magazine

Design News, Resources & Inspiration

8 Common Website Layouts Built with CSS Grid


By Eric Karkovack on Mar 21, 2021 05:42 pm


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. 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

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

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.

See the Pen CSS Grid: Card Variations by Olivia Ng

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.

See the Pen Grid-Based Blog Index Page Layout 🌷 by Sheelah Brennan

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.

See the Pen Center Focus Feature Section // CSS Grid by Brian Haferkamp

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.

See the Pen CSS (SCSS) grid with grid layout and fallback to flexbox by Vincent Humeau

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.

See the Pen Article Layout with Varying Content Width Using CSS Grid by Philipp

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.

See the Pen Simple CSS Grid Layout Pricing Tables by darkos

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.

See the Pen CSS Grid Responsive Image Gallery by Stephanie

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.

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.

We hope these examples will help you on your journey to implementing CSS Grid into your projects. And, if you’d like to see even more layouts, check out our CodePen collection!

The post 8 Common Website Layouts Built with CSS Grid appeared first on Speckyboy Design Magazine.



Read in browser »

Recent Articles:

Weekly News for Designers № 584
The 10 Best Photoshop Action Sets for Creating the Bokeh Effect
Why Thinking Ahead Is Crucial in Web Design
Do We Really Need to Follow Design Trends?
The 12 Best Lightroom Presets for Adding the HDR Effect to Your Photos
Share
Tweet
+1
Share
Forward
Copyright © 2021 Speckyboy Design Magazine, All rights reserved.
You signed up for daily Speckyboy Design Magazine email alerts either via Feedburner or directly through our site.

Our mailing address is:
Speckyboy Design Magazine
27 Braeside Park
Inverness, Scotland IV2 7HL
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Older messages

Speckyboy RSS: Weekly News for Designers № 584

Saturday, March 20, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 584 By Speckyboy on Mar 19, 2021 07:43 pm Envato Elements The 20

Speckyboy RSS: Why Thinking Ahead Is Crucial in Web Design

Wednesday, March 17, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Why Thinking Ahead Is Crucial in Web Design By Eric Karkovack on Mar 17, 2021 10:23 am The

Speckyboy RSS: Do We Really Need to Follow Design Trends?

Tuesday, March 16, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Do We Really Need to Follow Design Trends? By Addison Duvall on Mar 16, 2021 06:40 am

Speckyboy RSS: 5 Common WordPress Myths Debunked

Monday, March 15, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration 5 Common WordPress Myths Debunked By Eric Karkovack on Mar 15, 2021 09:06 am Don't be

Speckyboy RSS: Weekly News for Designers № 583

Saturday, March 13, 2021

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 583 By Speckyboy on Mar 12, 2021 10:56 am Envato Elements Google

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏