CSS grid-template Property

What You’ll Learn

The grid-template property is a shorthand for defining rows, columns, and named areas of a grid in one declaration.

Introduction

The grid-template property in CSS is a shorthand property that allows you to define the rows, columns, and areas of a grid layout in a single declaration. This property is essential for creating complex grid layouts with ease and flexibility, making it a powerful tool in modern web design.

Definition and Usage

Set grid-template on a grid container with display: grid. You can define row track sizes, column track sizes, and named grid areas together. The slash (/) separates row definitions from column definitions.

📝 Syntax

The grid-template property can set grid-template-rows, grid-template-columns, and named grid areas simultaneously:

element {
  grid-template: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas>;
}

Basic Example with Areas

.grid-container {
  display: grid;
  grid-template:
    "header header" 50px
    "sidebar content" 1fr
    "footer footer" 30px / 150px 1fr;
}

Rows and Columns Only

.grid-container {
  grid-template: 80px 1fr 40px / 1fr 1fr;
}

Default Value

The default value of the grid-template property is none, meaning that no explicit grid layout is defined and the browser will use its default behavior.

Syntax Rules

• Applies to grid containers only, not individual grid items.
• The slash separates row track definitions from column track definitions.
• Named area strings must form a valid rectangular grid.
• Resets implicit grid properties when set to a value other than none.
• The property is not inherited.

💎 Property Values

Examples Gallery

Build a full page layout with named areas, set rows and columns only, use repeat(), and create a simple two-column grid.

.grid-container {
  display: grid;
  grid-template:
    "header header" 50px
    "sidebar content" 1fr
    "footer footer" 30px / 150px 1fr;
}

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

.grid-container {
  display: grid;
  grid-template: 80px 1fr 40px / 1fr 1fr;
}

.grid-container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(2, 1fr);
}

.card-grid {
  display: grid;
  grid-template: auto / 1fr 1fr;
  gap: 16px;
}

♿ Accessibility

• Keep DOM order meaningful when named areas reorder visual layout.
• Use semantic HTML such as <header>, <nav>, <main>, and <footer>.
• Do not rely on grid position alone to convey structure; use headings and landmarks.
• Test keyboard tab order when sidebar and content are visually reordered.
• Verify layouts at small widths where templates may need media query overrides.

💡 Best Practices