The grid-template-areas property in CSS is used to specify the area within the grid layout. The named grid area can be rendered on the screen based on the sequence of values of the grid-template-areas property.
- none: It is the default value and it does not contains grid named areas.
- itemnames: It is the sequence of grid area names in the form of row and columns.
- Each area name is separated by a space.
- Each row is contained within single quote ‘ ‘.
- There is a semicolon at the end of the declaration only.
- Period represents items with no names.
Example 1: This example display the grid-template-areas property.
Example 2: This example display the grid-template-areas property.
Supported Browsers: The browser supported by grid-template-areas property are listed below:
- Google Chrome 57.0
- Internet Explorer 16.0
- Firefox 52.0
- Safari 10.0
- Opera 44.0
- CSS | transition-property Property
- CSS | right Property
- CSS | nav-up property
- CSS | top Property
- CSS | nav-right property
- CSS | nav-down property
- CSS | all Property
- HTML | DOM value Property
- Web API | DOMRectReadOnly x property
- Web API | DOMRectReadOnly y property
- CSS | margin-right Property
- CSS | max-height Property
- CSS | grid-row-gap Property
- Web API | DOMRect right property
- Web API | DOMRect top property
- CSS | min-height Property
- HTML | DOM Bdo dir Property
- HTML | DOM specified Property
- CSS | height Property
- CSS | animation-name Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.