🎯 CSS grid-template Property

grid-template is a CSS Grid shorthand property that defines the entire grid structure including rows, columns, and area layouts in a single declaration. It is one of the most powerful and compact ways to build grid layouts in CSS.

With grid-template, you can define the full grid structure at once instead of writing separate properties for rows, columns, and areas.

The property combines three main CSS Grid features into one shorthand syntax:

• grid-template-rows → Defines row structure
• grid-template-columns → Defines column structure
• grid-template-areas → Defines named layout areas

The shorthand structure is shown below:

grid-template:
  "area1 area2"
  "area3 area4"
  200px 1fr
  / 1fr 2fr;
                

In this structure: rows, columns, and areas are defined together in a single declaration.

No grid structure is defined. The element behaves like a normal block layout.

.container {
    grid-template: none;
}
                

Resets the property to its default value.

.container {
    grid-template: initial;
}
                

The following example demonstrates how to build a complete layout using grid-template shorthand.

.container {
    display: grid;
    grid-template:
        "header header"
        "sidebar content"
        "footer footer"
        100px 1fr 100px
        / 1fr 2fr;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: content; }
footer { grid-area: footer; }
                

This layout defines rows, columns, and named areas in a single shorthand structure, making the code compact and readable.

The grid-template property is useful for quickly defining an entire grid system in a single line. It improves readability and reduces repetitive code when building structured layouts.

• Define full grid structure in one place
• Combine rows, columns, and areas
• Improve code readability and organization
• Reduce repetitive CSS declarations
• Ideal for complex layouts