grid-template
Quick Summary for grid-template
The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.
Code Usage for grid-template
/* Keyword value */ grid-template: none;  /* grid-template-rows / grid-template-columns values */ grid-template: 100px 1fr / 50px 1fr; grid-template: auto 1fr / auto 1fr auto; grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%; grid-template: fit-content(100px) / fit-content(40%);  /* grid-template-areas grid-template-rows / grid-template-column values */ grid-template: "a a a"                "b b b"; grid-template: "a a a" 20%                "b b b" auto; grid-template: [header-top] "a a a"     [header-bottom]                  [main-top] "b b b" 1fr [main-bottom]                             / auto 1fr auto;  /* Global values */ grid-template: inherit; grid-template: initial; grid-template: revert; grid-template: unset; 
More Details for grid-template

grid-template

The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.

Constituent properties

This property is a shorthand for the following CSS properties:

grid-template-areas grid-template-columns grid-template-rows

Syntax

/* Keyword value */ grid-template: none;  /* grid-template-rows / grid-template-columns values */ grid-template: 100px 1fr / 50px 1fr; grid-template: auto 1fr / auto 1fr auto; grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%; grid-template: fit-content(100px) / fit-content(40%);  /* grid-template-areas grid-template-rows / grid-template-column values */ grid-template: "a a a"                "b b b"; grid-template: "a a a" 20%                "b b b" auto; grid-template: [header-top] "a a a"     [header-bottom]                  [main-top] "b b b" 1fr [main-bottom]                             / auto 1fr auto;  /* Global values */ grid-template: inherit; grid-template: initial; grid-template: revert; grid-template: unset; 

Values

none

Is a keyword that sets all three longhand properties to none, meaning there is no explicit grid. There are no named grid areas. Rows and columns will be implicitly generated; their size will be determined by the grid-auto-rows and grid-auto-columns properties.

<'grid-template-rows'> / <'grid-template-columns'>

Sets grid-template-rows and grid-template-columns to the specified values, and sets grid-template-areas to none.

[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

Sets grid-template-areas to the strings listed, grid-template-rows to the track sizes following each string (filling in auto for any missing sizes), and splicing in the named lines defined before/after each size, and grid-template-columns to the track listing specified after the slash (or none, if not specified).

Note: The repeat() function isn't allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the "ASCII art".

Note: The grid shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use grid (as opposed to grid-template) to prevent these values from cascading in separately.

Formal definition

Initial valueas each of the properties of the shorthand:grid-template-columns: nonegrid-template-rows: nonegrid-template-areas: none
Applies togrid containers
Inheritedno
Percentagesas each of the properties of the shorthand:grid-template-columns: refer to corresponding dimension of the content areagrid-template-rows: refer to corresponding dimension of the content area
Computed valueas each of the properties of the shorthand:grid-template-columns: as specified, but with relative lengths converted into absolute lengthsgrid-template-rows: as specified, but with relative lengths converted into absolute lengthsgrid-template-areas: as specified
Animation typediscrete

Formal syntax

none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

where <line-names> = '[' <custom-ident>* ']'<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

where <length-percentage> = <length> | <percentage>

Examples

Defining a grid template

CSS
#page {   display: grid;   width: 100%;   height: 200px;   grid-template: [header-left] "head head" 30px [header-right]                  [main-left]   "nav  main" 1fr  [main-right]                  [footer-left] "nav  foot" 30px [footer-right]                  / 120px 1fr; }  header {   background-color: lime;   grid-area: head; }  nav {   background-color: lightblue;   grid-area: nav; }  main {   background-color: yellow;   grid-area: main; }  footer {   background-color: red;   grid-area: foot; } 
HTML
<section id="page">   <header>Header</header>   <nav>Navigation</nav>   <main>Main area</main>   <footer>Footer</footer> </section> 
Result

Specifications

Specification
CSS Grid Layout Module Level 3 # explicit-grid-shorthand

See also

Related CSS properties: grid-template-rows, grid-template-columns, grid-template-areas Grid Layout Guide: Line-based placement with CSS Grid Grid Layout Guide: Grid template areas - Grid definition shorthands Video tutorial: Grid Template shorthand Select your preferred language English (US)Français日本語中文 (简体)正體中文 (繁體) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Our brains are wired to find things we are looking for - if your always cynical or waiting for things to go wrong, then your life will reflect that. On the other hand, having a positive outlook on life will bring you joy and provide you with inspiration when you least expect it ☀️🍉🌴
Unknown
Random CSS Property

padding-inline-start

The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
padding-inline-start css reference