Creating Flexible Layouts with CSS Grid

Introduction

CSS Grid is a powerful tool for creating web page layouts. Using grid-template-areas, you can define box placement in a visually intuitive way.

This article introduces how to create layouts that freely position multiple boxes using CSS Grid.

Completed Demo

Six boxes are positioned using grid-template-areas. Resize the screen to see the responsive layout changes.

Preview

HTML

<div class="demo-grid-wrapper">
  <div class="demo-grid-box demo-grid-box--1"></div>
  <div class="demo-grid-box demo-grid-box--2"></div>
  <div class="demo-grid-box demo-grid-box--3"></div>
  <div class="demo-grid-box demo-grid-box--4"></div>
  <div class="demo-grid-box demo-grid-box--5"></div>
  <div class="demo-grid-box demo-grid-box--6"></div>
</div>

CSS

.demo-grid-wrapper {
  width: 100%;
  display: grid;
  grid-template: repeat(4, 60px) / repeat(3, 1fr);
  gap: 0.5rem;
  grid-template-areas:
    'box1 box2 box2'
    'box1 box3 box5'
    'box4 box3 box5'
    'box4 box3 box6';
}

.demo-grid-box {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.demo-grid-box--1 {
  grid-area: box1;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
}

.demo-grid-box--2 {
  grid-area: box2;
  background: linear-gradient(135deg, #4ecdc4 0%, #44a39d 100%);
}

.demo-grid-box--3 {
  grid-area: box3;
  background: linear-gradient(135deg, #667eea 0%, #5a6fd6 100%);
}

.demo-grid-box--4 {
  grid-area: box4;
  background: linear-gradient(135deg, #f7b731 0%, #e5a82a 100%);
}

.demo-grid-box--5 {
  grid-area: box5;
  background: linear-gradient(135deg, #a55eea 0%, #9550d6 100%);
}

.demo-grid-box--6 {
  grid-area: box6;
  background: linear-gradient(135deg, #fd79a8 0%, #e56b96 100%);
}

How grid-template-areas Works

grid-template-areas is a property that lets you visually define grid layouts.

You assign names to each cell using strings, and cells with the same name are merged. It's like drawing a layout with text.

```
grid-template-areas:
"box1 box2 box2"
"box1 box3 box5"
"box4 box3 box5"
"box4 box3 box6";
```

In this example, box1 occupies rows 1-2 of column 1, box2 spans columns 2-3 of row 1, and box3 takes up rows 2-4 of column 2.

HTML Code

<div class="grid-wrapper">
  <div class="grid-box grid-box--1"></div>
  <div class="grid-box grid-box--2"></div>
  <div class="grid-box grid-box--3"></div>
  <div class="grid-box grid-box--4"></div>
  <div class="grid-box grid-box--5"></div>
  <div class="grid-box grid-box--6"></div>
</div>

CSS Code

.grid-wrapper {
  display: grid;
  grid-template: repeat(4, 80px) / repeat(3, 1fr);
  gap: 0.5rem;
  grid-template-areas:
    "box1 box2 box2"
    "box1 box3 box5"
    "box4 box3 box5"
    "box4 box3 box6";
}

.grid-box {
  border-radius: 8px;
}

.grid-box--1 {
  grid-area: box1;
  background-color: #ff6b6b;
}

.grid-box--2 {
  grid-area: box2;
  background-color: #4ecdc4;
}

.grid-box--3 {
  grid-area: box3;
  background-color: #667eea;
}

.grid-box--4 {
  grid-area: box4;
  background-color: #f7b731;
}

.grid-box--5 {
  grid-area: box5;
  background-color: #a55eea;
}

.grid-box--6 {
  grid-area: box6;
  background-color: #fd79a8;
}

Role of Each Property

display: grid

Makes the element a grid container. Child elements become grid items.

grid-template

Shorthand for grid-template-rows and grid-template-columns. repeat(4, 80px) / repeat(3, 1fr) means '4 rows at 80px height, 3 equally divided columns.'

grid-template-areas

Assigns names to each grid cell to visually define the layout. Cells with the same name are merged.

grid-area

Assigns a child element to a named area defined in grid-template-areas.

gap

Specifies the spacing between grid items. Shorthand for row-gap and column-gap.

1fr

A unit that equally divides available space. Three columns of 1fr each divide the container width into thirds.

Responsive Design

With grid-template-areas, you can easily change layouts using media queries.

When the screen gets smaller, you can rearrange boxes to create a mobile-optimized layout.

Responsive CSS

@media (max-width: 768px) {
  .grid-wrapper {
    grid-template-areas:
      "box1 box2 box2"
      "box1 box3 box4"
      "box6 box3 box4"
      "box6 box5 box5";
  }
}

Benefits of grid-template-areas

**Visually Clear**
The layout shape is visible in the code, making it immediately apparent where each element is positioned.

**Easy to Modify**
When you want to change the layout, just rewrite the grid-template-areas strings.

**Great for Responsive Design**
Simply override grid-template-areas in media queries to change layouts based on screen size.

Summary

Using CSS Grid's grid-template-areas, you can create complex layouts with visually clear code.

It's especially powerful when positioning multiple boxes irregularly or when you need significantly different layouts for responsive design.

As for when to use Grid vs Flexbox: use Flexbox for one-dimensional layouts (single row or column) and Grid for two-dimensional layouts (both rows and columns). Try incorporating it into your projects!