CSS grid-template-areas Property

The grid-template-areas property in CSS allows you to define named grid areas within a grid layout. This property specifies how grid items are placed into areas using a named grid template. Let's explore its syntax, values, examples, and browser support.

Syntax

grid-template-areas: none | 'name1 name2 ...' | 'name3 name4 ...';

• none: Default value indicating no named grid areas.
• 'name1 name2 ...': Defines named grid areas where each area name is placed within single quotes ' '.

Property Value

• none: This value signifies that the grid container does not have any named grid areas defined.
• 'name1 name2 ...': Specifies named grid areas where each name represents a grid area. Names are separated by spaces, and each row of area names is enclosed in single quotes.

Example 1: This example displays the grid-template-areas property. 

Output:👁 CSS grid-template-areas-example1
Example 2: This example displays the grid-template-areas property. 

Output:

👁 CSS grid-template-areas-example2
Understanding how to utilize the grid-template-areas property effectively can enhance the organization and structure of your CSS grid layouts, improving readability and maintainability of your code.

Supported Browsers: The browser supported by grid-template-areas property are listed below:

• Google Chrome 57.0+
• Microsoft Edge 16.0+
• Mozilla Firefox 52.0+
• Safari 10.1+
• Opera 44.0+