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

目录

CSS grid-area Property

❮ Previous Complete CSS Reference Next ❯

Example

Make "item1" start on row 2 column 1, and span 2 rows and 3 columns:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

The grid-area property can also be used to assign a name to a grid item. Named grid items can then be referenced to by the grid-template-areas property of the grid container. See examples below.

Show demo ❯

Default value: auto / auto / auto / auto
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridArea="1 / 2 / span 2 / span 3" Try it

Browser Support

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

Property
grid-area 57 16 52 10 44

CSS Syntax

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Property Values

Value Description Demo
grid-row-start Specifies on which row to start displaying the item. Demo ❯
grid-column-start Specifies on which column to start displaying the item. Demo ❯
grid-row-end Specifies on which row-line to stop displaying the item, or how many rows to span. Demo ❯
grid-column-end Specifies on which column-line to stop displaying the item, or how many columns to span. Demo ❯
itemname Specifies a name for the grid item

More Examples

Example

Item1 gets the name "myArea", and spans all five columns in a five columns grid layout:

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

Example

Let "myArea" span two columns in a five columns grid layout (period signs represent items with no name):

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

Example

Make "item1" span two columns and two rows:

.grid-container {
  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 {
  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 Layout


❮ Previous Complete CSS Reference Next ❯