Grid Areas

CSS Grid Areas is a powerful feature of CSS Grid that allows you to design web layouts using named sections. Instead of placing items using numbers or lines, you can assign names to different parts of your layout and arrange them easily.

What are Grid Areas

Grid Areas are named sections of a grid container. You define these areas using the grid template areas property and then assign elements to those areas using the grid area property.

This makes your layout more readable and easier to manage, especially for complex designs.

Why use Grid Areas

Grid Areas help you create structured layouts quickly
They improve code readability
They make responsive design easier
They allow you to rearrange layouts without changing HTML

Basic Example

First, create a grid container and define areas

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

Then assign elements to each area

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

In this example, the layout has a header at the top, a sidebar and content in the middle, and a footer at the bottom.

Understanding the Layout

Each word inside the grid template areas represents a column
Each line represents a row
Repeating a name means the area spans multiple columns

For example, header header means the header takes two columns

Responsive Design with Grid Areas

You can easily change layouts for different screen sizes using media queries

@media (max-width: 600px) {
  .container {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

This will stack all sections vertically on small screens.

Best Practices

Use meaningful names like header, main, sidebar, footer
Keep layouts simple and easy to understand
Test layouts on different screen sizes
Combine grid areas with other grid properties for better control

Conclusion

CSS Grid Areas make layout design simple and flexible. They allow you to visually organize your webpage structure using names instead of complex positioning. This is especially useful for beginners who want to build clean and responsive website layouts.