Aligning Content in CSS: Introduction to Grid - Part 2

Introduction

In everyday frontend layout development, CSS Grid is undoubtedly a powerful and flexible tool. Among its features, the grid-template-areas property makes defining complex layouts visually intuitive and efficient. By assigning names to each grid area, we can design web layouts as easily as assembling a jigsaw puzzle, without worrying about tedious calculations or nested structures. This article will take you through the usage of grid-template-areas and demonstrate how to leverage it to create responsive layouts with ease.

grid-template-areas

grid-template-areas is used to divide our grid into regions, much like dividing street blocks to build and name individual buildings. This makes managing and organizing layouts more intuitive and efficient.

The syntax is as follows:

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

• grid-area-name: Corresponds to the name of the grid area.
• .: Represents an empty grid cell.
• none: Indicates that no grid area is defined.

Let’s understand this CSS property through an example.

James took a piece of land and divided it into 3×4, totaling 12 small grids. He planned to build a hotel in the top three grids, a church in the bottom three grids, and for the six middle grids, build a restaurant in the left two grids and an apartment building in the right four grids. The illustration is shown below:

The corresponding CSS code is as follows:

.container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        "hotel hotel hotel"
        "restaurant apartment apartment"
        "restaurant apartment apartment"
        "church church church";
}

Since there are 12 grids divided into four zones, we only need 4 elements for the grid items. The following demonstrates the HTML structure:

<div class="container">
    <div class="hotel">hotel</div>
    <div class="restaurant">restaurant</div>
    <div class="apartment">apartment</div>
    <div class="church">church</div>
</div>

At this stage, you only need to use the grid-area property for each grid item to assign it to a specific region

    .hotel {
      grid-area: hotel;
    }

    .restaurant {
      grid-area: restaurant;
    }

    .apartment {
      grid-area: apartment;
    }

    .church {
      grid-area: church;
    }

Note: If we name the grid areas but don’t name the grid lines, the grid lines’ names will be generated automatically based on the grid area names. The rule is to append -start and -end to the area name. For example, if a grid area is named “hotel,” the left column line will be named “hotel-start” and the right column line will be named “hotel-end.”

Additionally, grid areas must form a regular rectangular shape; L-shaped, concave, or convex configurations are not supported and will be treated as invalid attribute values.

Why grid-template-areas is powerful

In traditional layout methods (such as floating layouts, table layouts, etc.), we often rely on a large number of CSS rules to adjust the position of elements. With grid-template-areas, however, you can assign a name to each area in the layout and then directly use these area names in the CSS. This makes the layout much more intuitive and easier to understand, especially when dealing with complex layouts.

Let’s do a litte change on James’s design

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

Now that we’ve discussed grid-template-areas, this layout should feel quite familiar. The page consists of a header at the top, a footer at the bottom, and the middle section is divided into a sidebar that occupies one-third of the width, with the remaining space filled by content.

Remember this principle: use grid-template-columns and grid-template-rows to divide the grid into individual cells, and then use grid-template-areas to define which cells should span or combine together.

Ok， that concludes the introduction to grid-template-areas. In the next blog, we’ll dive deeper into a related topic and explore more advanced techniques in CSS Grid. See you then!