CSS grid-template-areas ιδιότητα

Ορισμός και χρήση

Η ιδιότητα grid-template-areas καθορίζει την περιοχή στο δίκτυο布局.

Μπορείτε να χρησιμοποιήσετε grid-area Αναφέρετε το όνομα του έργου της ιδιότητας και στη συνέχεια αναφέρετε αυτό το όνομα στην ιδιότητα grid-template-areas.

Each area is defined by an apostrophe. Use periods to refer to unnamed grid items.

See also:

CSS tutorial:Πρόγραμμα δίνοντας το CSS

CSS reference manual:grid-area property

CSS reference manual:grid-template property

Instance

Example 1

To make the named item "myArea" span two columns in a five-column grid layout:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: "myArea myArea . . .";
}

Try it yourself

Example 2

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

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

Try it yourself

Example 3

Name all items and create a ready-made web 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'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Try it yourself

CSS syntax

grid-template-areas: none|itemnames;

Attribute value

Value Description
none Default value.Unnamed grid areas (grid areas).
itemnames Specifies the sequence in which each column and each row should be displayed.

Technical details

Default value: none
Inheritance: No
Animation creation: Supported. See also:Animation-related properties.
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridTemplateAreas=". . . myArea myArea"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44