Tutorials


CSS grid-template-areas property


The grid-template-areas property in CSS is used to define named grid areas within a grid container. It allows you to create a layout by specifying how different parts of your content should be positioned in a grid using named areas. This makes it easier to manage complex layouts and align items in a grid.

Basic Syntax

selector {
  grid-template-areas: "area1 area2 area3"
                       "area4 area5 area6"
                       "area7 area8 area9";
}

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-areas:
        "header header header"
        "main sidebar sidebar"
        "footer footer footer";
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: auto 1fr auto;
      grid-gap: 10px; /* Space between grid items */
    }
    .header {
      grid-area: header;
      background-color: lightcoral;
    }
    .main {
      grid-area: main;
      background-color: lightgreen;
    }
    .sidebar {
      grid-area: sidebar;
      background-color: lightblue;
    }
    .footer {
      grid-area: footer;
      background-color: lightgoldenrodyellow;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="main">Main Content</div>
    <div class="sidebar">Sidebar</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

In this example, the grid-template-areas property is used to define a grid layout with four named areas: header, main, sidebar, and footer. The grid-template-columns and grid-template-rows properties define the sizes of the columns and rows, while grid-template-areas specifies how these areas are arranged.

Key Concepts

1. Named Areas

You define named areas using strings in grid-template-areas. Each string represents a row in the grid, and the names within each string represent different grid items.

grid-template-areas:
  "header header header"
  "main sidebar sidebar"
  "footer footer footer";

2. Layout Creation

Using grid-template-areas, you can easily visualize and create complex grid layouts. Named areas help manage and align items without dealing with specific grid lines or indices.

3. Item Placement

After defining the grid areas, you use the grid-area property on individual grid items to place them into the named areas.

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

4. Auto Placement

If the named area is not explicitly defined for a grid item, the item will be placed in the grid using the default auto-placement rules.

Practical Examples

Example 1: Simple Grid Layout

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-areas:
        "header header header"
        "main sidebar sidebar"
        "footer footer footer";
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-rows: auto 1fr auto;
    }
    .header {
      grid-area: header;
      background-color: lightcoral;
      padding: 10px;
    }
    .main {
      grid-area: main;
      background-color: lightgreen;
      padding: 10px;
    }
    .sidebar {
      grid-area: sidebar;
      background-color: lightblue;
      padding: 10px;
    }
    .footer {
      grid-area: footer;
      background-color: lightgoldenrodyellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="main">Main Content</div>
    <div class="sidebar">Sidebar</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

Example 2: Responsive Layout with Named Areas

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-areas:
        "header header header"
        "main main sidebar"
        "footer footer footer";
      grid-template-columns: 1fr 2fr;
      grid-template-rows: auto 1fr auto;
    }
    .header {
      grid-area: header;
      background-color: lightcoral;
      padding: 10px;
    }
    .main {
      grid-area: main;
      background-color: lightgreen;
      padding: 10px;
    }
    .sidebar {
      grid-area: sidebar;
      background-color: lightblue;
      padding: 10px;
    }
    .footer {
      grid-area: footer;
      background-color: lightgoldenrodyellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="main">Main Content</div>
    <div class="sidebar">Sidebar</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

Browser Support

The grid-template-areas property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It has partial support in Internet Explorer (IE10 and IE11), with some limitations compared to modern browsers.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about