📦 grid-template — The Master Property of CSS Grid Layout

🌐 What is grid-template?

grid-template is a shorthand property in CSS Grid that lets you definerows, columns, and grid areas — all in one place. It combines these three properties:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas

This makes it easier to create visually structured layouts with very compact, readable syntax.

>>“grid-template is the blueprint of your entire grid layout — rows, columns, and areas in one shot.”

📌 Basic Syntax

Grid Template Syntax

grid-template:
  <'grid-template-rows'> /
  <'grid-template-columns'>;

You can also include grid-template-areas before the slash.

🧱 Example 1: Just Rows & Columns

Rows + Columns

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

This creates:

  • 3 rows → 100px, 1fr, 80px
  • 3 columns → 200px, 1fr, 200px

🗺️ Example 2: Rows + Columns + Areas

Complete Template

.container {
  display: grid;
  grid-template:
    "header header header" 80px
    "sidebar content ads" 1fr
    "footer footer footer" 60px
  / 200px 1fr 200px;
}

Breakdown:

RowArea NamesHeight
1"header header header"80px
2"sidebar content ads"1fr
3"footer footer footer"60px

📐 Visual Structure

Media content

🧠 Why Use grid-template?

  • Makes large layout definitions easier to read
  • Lets you define the entire grid in one block
  • Visually matches the design/wireframe
  • Reduces CSS complexity and improves maintainability

📌 Equivalent Longhand Example

Without Shorthand

grid-template-rows: 80px 1fr 60px;
grid-template-columns: 200px 1fr 200px;
grid-template-areas:
  "header header header"
  "sidebar content ads"
  "footer footer footer";

Using grid-template combines all of this into a single property, making it cleaner and easier.

🧩 grid-template with repeat() and minmax()

Advanced Grid Template

grid-template:
  "title title" auto
  "nav content" 1fr
  / 250px minmax(300px, 1fr);

This creates a responsive layout with flexible content width.

⚠️ Important Notes

Note

⚡ grid-template requires that areas and row heights be written in the same line. For example:"header header" 80pxNot:"header header" on one line and 80px on the next.

Note

🧠 Every row must have the same number of named columns in grid-template-areas.

🧩 Practical Layout Example

Dashboard Layout

.dashboard {
  display: grid;
  grid-template:
    "topbar topbar" 70px
    "menu main" 1fr
    "menu footer" 60px
  / 250px 1fr;
}

• Left side = vertical menu • Top = full-width header • Right = main content & footer

🔥 Summary

grid-template is a powerful shorthand that allows you to define rows, columns, and areas in a single, beautifully organized block of CSS. It improves readability, reduces code, and makes complex layouts much easier to visualize.

>>“grid-template turns layout code into a blueprint you can read like a map.”

Learn more fromMDN Docs 📘