The grid-template property is a shorthand for grid-template-rows, grid-template-columns, and grid-template-areas. Set it on a grid container (display: grid).
The initial value is none. Use the grid shorthand instead when you also want to reset implicit tracks (grid-auto-*). Place items into named areas with grid-area.
Not deprecated and not experimental. Baseline widely available with CSS Grid.
grid-template: none | <rows> / <columns> | <areas + row sizes> [ / <columns> ]? | initial | inherit;Two common forms: rows / columns, or ASCII-art areas with optional sizes and a trailing / columns.
| Value | Description | Try it |
|---|---|---|
none | Default. No explicit rows, columns, or areas | Try it |
<rows> / <columns> | Sets row and column tracks; areas become none | Try it |
| Area strings | Named areas in quotes; optional row size after each string | Try it |
/ <columns> | Optional column list after the area rows | Try it |
initial | Resets to none | Try it |
inherit | Takes the parent value (not inherited by default) | Try it |
grid-templatePick the short rows/columns form, or the areas form for page regions.
display: grid on the container.grid-template: <rows> / <columns>./ and column sizes.grid-area: name to match the strings.| Form | Sets |
|---|---|
100px 1fr / 1fr 1fr | Rows + columns only |
"a a" "b c" / 1fr 1fr | Areas + columns (row sizes default to auto) |
"a a" 40px "b c" 1fr / 1fr 1fr | Areas + row sizes + columns |
Change only grid-template. Items use fixed grid-area names a, b, and c.
Each snippet focuses on grid-template. Use Try It Yourself for a live editor.
The slash form sets tracks only. Areas stay none.
<style>
.grid {
display: grid;
grid-template: 40px 1fr / 1fr 1fr;
}
</style>
<div class="grid">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
</div>40px 1fr creates two rows.1fr 1fr creates two equal columns.grid-template-areas to none.Quoted strings draw the layout. Columns follow the slash.
<style>
.grid {
display: grid;
grid-template:
"a a"
"b c"
/ 1fr 1fr;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
</style>
<div class="grid">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>a cells side by side make a wide header./. 1fr 1fr sizes the two columns.grid-area: a places the child into that named region.Put a track size after each area string.
<style>
.grid {
display: grid;
grid-template:
"a a" 40px
"b c" 1fr
/ 1fr 1fr;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
</style>
<div class="grid">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>"a a" 40px makes that row 40px tall."b c" 1fr takes remaining height./ 1fr 1fr still defines both columns.repeat() here. The areas form expects one size per drawn row.One shorthand resets three longhands. Watch the form you pick.
grid-template: 1fr / 1fr 1fr sets areas to none. Earlier named areas are wiped by that declaration.
grid resets more than the templateThe grid shorthand also resets implicit properties. Prefer grid-template when you only want the explicit template.
repeat() in the areas formASCII-art rows must line up with sizes. Use the longhands if you need repeat() with areas.
Every quoted row needs the same number of cells. Uneven strings make the areas invalid.
. for empty cellsA period in an areas string leaves a cell unnamed so nothing claims that spot by area name.
grid-template is a browser style property for CSS Grid. Node.js, Deno, and Bun do not apply it.
Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+, Opera, Samsung Internet 6+. Not supported in Internet Explorer.
Bottom line: Safe for modern grid layouts. No vendor prefix is required in current browsers.
rows / columns (areas become none)./ columns.grid: use grid-template when you must not reset auto tracks.One line: grid-template defines the explicit grid’s rows, columns, and named areas together.
Deep dive into named area strings alone.
8 people found this page helpful