Skip to tool

CSS Grid Template Builder

Generate CSS Grid template declarations.

Output will appear here…

How to Use This Tool

  1. Fill in Columns, Rows, Gap, and Template Areas (one per line). Each control is labeled; you do not need to paste a JSON blob.
  2. Click "Run" to run the tool in your browser.
  3. Read the result below the form and copy it if you need it in another app.

Learn More About CSS Grid Template Builder

About CSS Grid Template Builder

Generate CSS Grid template declarations with named areas and responsive breakpoints.

About

Generate CSS Grid template declarations with named areas and responsive breakpoints.
Generate CSS Grid template declarations with named areas and responsive breakpoints.
Runs in browser
Yes
No signup required
Yes

Examples

3-column layout

3-column layout
Input
{
  "columns": "1fr 2fr 1fr",
  "rows": "auto 1fr auto",
  "gap": "16px",
  "areas": "header header header\nsidebar main main\nfooter footer footer"
}
Output
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer"

}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

2-column sidebar

2-column sidebar
Input
{
  "columns": "250px 1fr",
  "rows": "auto 1fr",
  "gap": "12px",
  "areas": "header header\nsidebar content"
}
Output
.grid-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  grid-template-areas:
    "header header"
    "sidebar content"

}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

Single column

Single column
Input
{
  "columns": "1fr",
  "rows": "auto",
  "gap": "8px",
  "areas": ""
}
Output
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 8px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

Use Cases

  • Check css grid template builder values while you draft a page, spreadsheet, or config.
  • Fill Columns, Rows, Gap and compare the result to a second source.
  • Keep sensitive inputs on-device — this page runs the calculation in the browser.

Frequently Asked Questions

Related Tools

Related tools: