🎯 CSS grid-area Property

grid-area is a CSS Grid shorthand property that defines both the row and column placement of a grid item in a single line. It can also be used to assign a named grid area, which makes layout creation more structured and readable.

With grid-area, you can either define exact grid positioning using row and column lines or assign an element to a named area defined in grid-template-areas.

When used for positioning, it combines four grid properties in one line:

grid-area: row-start / column-start / row-end / column-end;
                

Example:

.item {
    grid-area: 1 / 2 / 3 / 4;
}
                

This places the item starting from row line 1 and column line 2, ending at row line 3 and column line 4.

You can assign a grid item to a named area defined in grid-template-areas.

.item {
    grid-area: header;
}
                

This places the item inside the “header” grid area.

Resets the property to its default value.

.item {
    grid-area: initial;
}
                

The following example demonstrates how to define a full grid layout using named areas.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "footer footer footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}
                

This layout creates a structured page using named grid areas, making the design easier to manage and understand.

The grid-area property is one of the most powerful tools in CSS Grid. It allows developers to build complex layouts in a clean and semantic way.

• Define both row and column placement in one line
• Create named grid layouts for better structure
• Improve readability of CSS code
• Simplify complex layout designs
• Build fully responsive modern web layouts