Showing content from https://webplatform.github.io/docs/css/properties/grid-template below:
grid-template · WebPlatform Docs
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
CSS Object Model Property
:
-
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
RetroSearch is an open source project built by @garambo
| Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4