CSS grid-template-areas Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The grid-template-areas property in CSS is part of the CSS Grid Layout module. It allows you to define named grid areas within a grid container, making it easier to design complex layouts with a clear, readable syntax.

This property helps in positioning and aligning grid items within the grid container by assigning them to predefined areas.

💡 Syntax

The syntax for the grid-template-areas property uses a string to represent the grid layout. Each string defines a row in the grid, with named areas enclosed in quotes and separated by spaces.

Syntax

Copied

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

🎛️ Default Value

The default value of the grid-template-areas property is none, meaning no named grid areas are defined.

🏠 Property Values

Value	Description
none	No grid areas are defined.
string	A sequence of strings, each representing a row in the grid and containing named areas separated by spaces.

📄 Example

In this example, we'll create a simple layout with a header, sidebar, main content area, and footer.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS grid-template-areas Example</title>
  <style>
    .container {
      display: grid;
      grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
      grid-gap: 10px;
    }

    .header {
      grid-area: header;
      background-color: lightblue;
    }

    .sidebar {
      grid-area: sidebar;
      background-color: lightgreen;
    }

    .main {
      grid-area: main;
      background-color: lightcoral;
    }

    .footer {
      grid-area: footer;
      background-color: lightgoldenrodyellow;
    }

    .container div {
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The grid-template-areas property is well-supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The grid-template-areas property is a powerful feature of CSS Grid Layout, making it easier to create complex and responsive layouts with clean and readable code.

By defining named grid areas, you can efficiently manage the placement of content and maintain a clear structure in your stylesheets. Experiment with different grid layouts and see how this property can enhance your web design projects.