CSS Grid and Grid Template Areas: Layout Ideas for your Next Project (Infographic and code)

Welcome back! In this post, we’re exploring some exciting CSS Grid and template area layout ideas that you can use in your next web design project. Take a look at the infographic below, then explore the accompanying CSS snippets to see how each layout is built.

What is CSS grid?

CSS Grid Layout, often referred to as CSS Grid, is a two-dimensional layout system that allows you to create complex grid-based layouts. It offers precise control over rows, columns, and their placement, enabling flexible and responsive designs.

I’ve put together a detailed guide to CSS Grid that’s perfect for beginners. So, if you’d like to dive deeper and learn how CSS Grid works, check out the full post here.

Additionally, we also dive into building creative cool grid layouts in the Bricks Builder Mastery Course and class-based projects.

CSS Grid Template Areas

The beauty of using the grid-template-areas property is that you can actually make much more complex layouts just by drawing them with names. Here’s an example –

.grid {
grid-template-areas:
  "header  header  header"
  "nav     main    sidebar"
  "nav     main    sidebar"
  "footer  footer  footer";
}

If you look at the code above, you’ll see we have header mentioned three times across. The header doesn’t explicitly say “take up three columns.” The grid template tells it to. The same applies for nav, main, sidebar (rows) and footer (columns). Again, you can create layouts like this simply by drawing them with names.

OK, so let’s first of all take a look at the infographic, and then we’ll finish off with each code snippet that you can copy and paste directly into your projects.

Feel free to right-click and save this image as a handy resource or reference for your own projects.

CSS Grid and template areas snippets

Below are some copy and paste snippets you can use in your projects.

1 Column

Full width layout

.grid-1 {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
}

2 Columns

Two equal columns

.grid-2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
}

3 Columns

Three equal columns

.grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
}

4 Columns

Four equal columns

.grid-4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
}

Header + 2 columns + footer

Classic page layout

.grid-hcf {
   display: grid;
   grid-template-areas:
      "header header"
      "main aside"
      "footer footer";
   gap: 1rem;
}

.header { grid-area: header; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Sidebar left

Sidebar on the left

.grid-sbl {
   display: grid;
   grid-template-columns: 250px 1fr;
   grid-template-areas:
      "sidebar header"
      "sidebar main";
   gap: 1rem;
}
.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }

Sidebar right

Sidebar on the right

.grid-sbr {
   display: grid;
   grid-template-columns: 250px 1fr;
   grid-template-areas:
      "header sidebar"
      "main sidebar";
   gap: 1rem;
}
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }

Masonry style

Auto-fit responsive cards

.grid-mas {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap 1rem;
}

Featured + cards

Featured area with cards below

.grid__featured-cards {
   display: grid;
   grid-template-rows: auto 1fr;
   grid-template-columns: repeat(3, 1fr);
   grid-template-areas:
   "featured featured featured"
   "card1 card2 card3";
   gap: 1rem;
}
.featured { grid-area: featured; }
.card1 { grid-area: card1; }
.card2 { grid-area: card2; }
.card3 { grid-area: card3; }

Asymmetrical layout

Creative asymmetrical design

.grid-asym {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   grid-template-rows: 200px 200px;
   grid-template-areas:
      "left right-top right-top"
      "left right-bottom-1 right-bottom-2";
   gap: 1rem;
}
.left{ grid-area: left; }
.right-top { grid-area: right-top; }
.right-bottom-1 { grid-area: right-bottom-1; }
.right-bottom-2 { grid-area: right-bottom-2; }

Summary

And there you have it! I hope you found this post useful and picked up some inspiration along the way. Why not try recreating some of these layouts in your favourite page builder?

If you’d like to take your skills further and learn how to build layouts like these from scratch, check out my Bricks Builder and Oxygen 6 Design Mastery Courses here.