YouTipPr Grid Template Areas
## CSS grid-template-areas Property
The `grid-template-areas` CSS property is a powerful tool in CSS Grid Layout that allows you to design grid layouts by referencing the names of grid areas.
By assigning names to grid items using the `grid-area` property, you can visually map out the structure of your webpage directly within your CSS container rules.
---
## Quick Example
In the example below, we name a grid item `"myArea"` and configure it to span across five columns within the grid container:
```css
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `grid-template-areas` property:
| Property | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **grid-template-areas** | 57 | 16 | 52 | 10 | 44 |
---
## Property Definition and Usage
* The `grid-template-areas` property specifies areas within the grid layout.
* The `grid-area` property is used on child elements to assign them a custom name.
* Once named, these grid items can be referenced and positioned by the parent container's `grid-template-areas` property.
* Each row is defined within single or double quotes (`' '` or `" "`), with individual column cells separated by spaces.
* A period (`.`) represents an empty or unnamed grid cell.
### Property Specifications
| Feature | Description |
| :--- | :--- |
| **Default Value:** | `none` |
| **Inherited:** | No |
| **Animatable:** | Yes (discrete interpolation) |
| **Specification:** | CSS Grid Layout Module Level 1 |
| **JavaScript Syntax:** | `object.style.gridTemplateAreas = "header header . footer footer"` |
---
## Syntax
```css
grid-template-areas: none | itemnames;
```
### Property Values
| Value | Description |
| :--- | :--- |
| `none` | Default value. No named grid areas are defined. |
| `itemnames` | A sequence of strings representing the rows and columns of the grid. Each string defines a row, and each word within a string defines a cell. |
---
## Code Examples
### Example 1: Leaving Cells Empty with the Dot (`.`) Notation
You can use a period (`.`) to represent a grid cell that does not contain any named item.
```css
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .';
}
```
*In this example, `item1` occupies the first two columns of a 5-column row, leaving the remaining three columns empty.*
---
### Example 2: Spanning Multiple Rows and Columns
To make an item span across multiple rows, repeat its name in the corresponding cells of each row.
```css
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas:
'myArea myArea . . .'
'myArea myArea . . .';
}
```
*Here, `item1` spans across 2 rows and 2 columns.*
---
### Example 3: Creating a Complete Webpage Layout
You can name all major elements of your page to build a clean, responsive, and highly readable website template:
```css
/* Assign names to grid items */
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
/* Define the layout structure on the container */
.grid-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
```
---
## Important Considerations
1. **Grid Shape Validity:** Every row in `grid-template-areas` must have the exact same number of columns.
2. **Rectangular Areas Only:** Named grid areas must form a single, contiguous rectangle. You cannot create non-rectangular shapes (like "L" or "T" shapes). If you attempt to define a non-rectangular area, the entire declaration will be treated as invalid.
3. **Spacing:** Multiple consecutive periods (e.g., `...`) with no spaces between them are treated as a single empty cell. However, separating them with spaces (e.g., `. . .`) is recommended for visual clarity.
---
## Related Articles
* CSS Tutorial: (https://www.runoob.com/css/css-grid.html)
* CSS Reference: (pr-grid-area.html)
* CSS Reference: (pr-grid-template.html)