CSS grid-area Property

<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

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:

grid-row-start

grid-column-start

grid-row-end

grid-column-end

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.

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

<!--

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

-->

CSS Syntax

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

Property Values

Value	Description
grid-row-start	Specifies on which row to start displaying the item.
grid-column-start	Specifies on which column to start displaying the item.
grid-row-end	Specifies on which row-line to stop displaying the item, or how many rows to span.
grid-column-end	Specifies on which column-line to stop displaying the item, or how many columns to span.
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 »

CSS tutorial: CSS Grid Layout

❮ Previous
Complete CSS Reference
Next ❯

搜尋此網誌

wefcdr