grid-template
Summary
Shorthand for setting grid-template-columns, grid-template-rows, and grid-template-areas in a single declaration.
Overview table
- Initial value
See individual properties- Applies to
- Grid containers
- Inherited
- No
- Media
- visual
- Computed value
- See individual properties
- Animatable
- No
- Percentages
- See indvidual properties
Syntax
grid-template: <grid-template-columns> / <grid-template-rows>grid-template: <track-list> / <line-names> <string> <track-size> <line-names>grid-template: none
Values
- none
- Sets all three individual properties to their initial values (“none”).
- <grid-template-columns> / <grid-template-rows>
- Sets grid-template-columns and grid-template-rows to the specified values, and sets grid-template-areas to "none".
- <track-list> / <line-names> <string> <track-size> <line-names>
- Sets grid-template-columns to the track listing specified before the slash (or "none", if not specified). Sets grid-template-areas to the strings listed after the slash. Sets grid-template-rows to the <track-size>s following each string (filling in “auto” for any missing sizes), and splicing in the named lines defined before/after each size.
This syntax allows the author to align track names and sizes inline with their respective grid areas.
Examples
/*
The shorthand syntax
*/
grid-template: auto 1fr auto / auto 1fr;
/*
is equivalent to
*/
grid-template-columns: auto 1fr auto;
grid-template-rows: auto 1fr;
grid-template-areas: none;
Related specifications
- W3C Grid Layout Module
- W3C Working Draft