grid-template
A shorthand that sets the grid’s rows, columns, and named areas in one declaration.
- Initial value
none- Inherited
- No
- Animatable
- yes, just like the longhand properties
- Applies to
- grid containers
- JavaScript
element.style.gridTemplate = "auto 1fr / 1fr 1fr"
Example
#.card {
display: grid;
grid-template:
"image title" auto
"image text" 1fr
/ 80px 1fr;
gap: 4px 12px;
}<div class="card stage">
<div class="box" style="grid-area: image">IMG</div>
<strong style="grid-area: title">Python course</strong>
<span style="grid-area: text">12 modules, from the basics to machine learning</span>
</div>Definition and usage
#The grid-template property combines grid-template-rows, grid-template-columns, and grid-template-areas. In its simplest form you give the rows and columns separated by a slash: grid-template: auto 1fr / 200px 1fr.
You can also combine area names with row heights: each string of names gets its height right next to it, and after the slash you give the column widths. This form can be compact, but harder to read.
The shorthand resets all three longhand properties, so any part you leave out falls back to its default.
Syntax
#grid-template: none | <rows> / <columns> | [ "<areas>" <height>? ]+ / <columns>;Values
#- No explicit grid.
- Two rows (the second taller) and three equal columns.
- A short row and a narrow column, with the rest of the space for the others.
Values in practice
#none
.demo { grid-template: none; }1fr 2fr / 1fr 1fr 1fr
.demo { grid-template: 1fr 2fr / 1fr 1fr 1fr; }40px 1fr / 80px 1fr
.demo { grid-template: 40px 1fr / 80px 1fr; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- For complex layouts, write
grid-template-areasandgrid-template-columnsseparately. It’s easy to break the shorthand with a single character. - The slash in the shorthand always separates rows (before) from columns (after).
Related entries
#- grid-template-rowsDefines the grid’s rows: their number and heights.
- grid-template-columnsDefines the grid’s columns: their number and widths.
- grid-template-areasDescribes the grid layout with named areas, almost like a drawing in code.
- grid-areaAssigns an item to a named grid area, or sets its rows and columns all at once.
Spotted a mistake or missing an example? Write to us.