码农教程 - 一技在手,衣食无忧! tools

目录

CSS grid-template-areas Property

❮ Previous Complete CSS Reference Next ❯

Example

Make the named item "myArea" span two columns in a five columns grid layout:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: "myArea myArea . . .";
}
Try it Yourself »

Definition and Usage

The grid-template-areas property specifies areas within the grid layout.

You can name grid items by using the grid-area property, and then reference to the name in the grid-template-areas property.

Each area is defined by apostrophes. Use a period sign to refer to a grid item with no name.

Show demo ❯

Default value: none
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridTemplateAreas=". . . myArea myArea"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-template-areas 57 16 52 10 44

CSS Syntax

grid-template-areas: none| itemnames;

Property Values

Value Description Demo
none Default value. No named grid areas Demo ❯
itemnames A sequence that specifies how each columns and row should display Demo ❯

More Examples

Example

Specify two rows, where "item1" spans the first two columns in the first two rows (in a five columns grid layout):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'myArea myArea . . .'
    'myArea myArea . . .';
}
Try it Yourself »

Example

Name all items, and make a ready-to-use webpage template:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}
Try it Yourself »

Related Pages

CSS Tutorial: CSS Grid Item

CSS Reference: The grid-area property

CSS Reference: The grid-template property


❮ Previous Complete CSS Reference Next ❯