Mastering CSS grid-template-areas for Better Layouts

Introduction

The grid-template-areas CSS property allows you to define named grid areas within a grid container, making your layout easier to organize and structure. This property is part of the CSS Grid Layout Module, a powerful system for creating two-dimensional layouts on the web.

Browser Compatibility

The grid-template-areas property is well-supported across many devices and browser versions, having been available since July 2020. This ensures that your grid designs work consistently across different platforms.

Description

The grid-template-areas property allows you to define named grid areas within a grid container. This makes it easier to manage and reference these areas in your CSS. By using grid-template-areas, you can create a more organized and flexible grid layout, which is especially useful for complex web designs.

Syntax

/* Keyword value */
grid-template-areas: none;

/* String values */
grid-template-areas: "a b";
grid-template-areas:
  "a b ."
  "a c d";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset;

Values

none

The none keyword value indicates that the grid container does not define any named grid areas. This is the default value for the property.

String Values

String values are used to define the layout of the grid. Each string represents a row, and each cell within the string represents a column. Multiple cells with the same name within and between rows create a single named grid area that spans the corresponding grid cells. These cells must form a rectangle.

Example:

grid-template-areas:
  "a b ."
  "a c d";

In this example, a, b, c, and d are named grid areas, and . represents an empty cell.

Null Cell Tokens

All unnamed areas in the grid can be represented using null cell tokens, which are sequences of one or more . (U+002E FULL STOP) characters. These tokens create empty spaces in the grid.

Example:

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

In this example, a null token (.) is used to create an empty space in the grid container.

Global Values

The grid-template-areas property also accepts global values:

• inherit: The grid container inherits the value from its parent element.
• initial: The grid container is set to its initial value, which is none.
• revert: The grid container reverts to the default value specified by the user agent.
• revert-layer: The grid container reverts to the value specified by the user agent for the specific layer.
• unset: The grid container is reset to the initial value if it is already specified, or inherits the value if it is not.

Formal Definition

The grid-template-areas property in CSS is used to specify named grid areas within a grid container, allowing for more organized and flexible layouts.

Formal Syntax

grid-template-areas =
  none |
  [<string>]+

• none: This keyword value indicates that the grid container does not define any named grid areas.
• [<string>]+: A sequence of one or more strings, where each string represents a row in the grid. Each cell within the string represents a column. Cells with the same name within and between rows create a single named grid area that spans the corresponding grid cells.

Examples

Example 1: Simple Grid Layout

In this example, we will create a simple grid layout with named areas for a header, navigation, main content, and footer.

HTML:

<div id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</div>

CSS:

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav  main"
    ".  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

Result: This code creates a grid layout with a header spanning the top row, a navigation area on the left, a main content area on the right, and a footer at the bottom. The null token (.) is used to create an empty space in the bottom left corner of the grid.

Example 2: Complex Grid Layout

In this example, we will create a more complex grid layout with named areas for a header, menu, main content, right sidebar, and footer.

HTML:

<div class="grid-template">
  <div style="grid-area: header">Header</div>
  <div style="grid-area: menu">Menu</div>
  <div style="grid-area: main">Main</div>
  <div style="grid-area: right">Right</div>
  <div style="grid-area: footer">Footer</div>
</div>

CSS:

.grid-template {
  background-color: steelblue;
  padding: 10px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

.grid-template > div {
  background-color: aliceblue;
  text-align: center;
  padding: 25px 5px;
  font-size: 18px;
}

Result: This code creates a grid layout with a header spanning the top row, a menu on the left, a main content area in the middle, a right sidebar, and a footer at the bottom. The layout is designed to be flexible and responsive, ensuring a good user experience across different devices.

Specifications

The grid-template-areas property is defined in the CSS Grid Layout Module Level 2. This module provides a robust system for creating two-dimensional layouts on the web, enabling developers to design complex and flexible grid structures.

CSS Grid Layout Module Level 2

• Specification: CSS Grid Layout Module Level 2
• Section: Grid Template Areas Property

The CSS Grid Layout Module Level 2 outlines the syntax, values, and behavior of the grid-template-areas property. It specifies how named grid areas should be defined and how they interact with other grid properties. This specification ensures that developers can create reliable and consistent grid layouts that work seamlessly across various devices and browsers.

See Also

• grid-template-rows: Defines the rows of the grid.
• grid-template-columns: Defines the columns of the grid.
• grid-template: A shorthand property for defining both the rows and columns of the grid.
• Grid template areas: An in-depth guide to using grid template areas in CSS.
• Video: Grid template areas: A video tutorial on how to use grid template areas effectively.