CSS grid-area Property

The grid-area property is used to specify the size and the location of the grid item within the grid container. It is a shorthand property for the following properties, applied in the order: row-start, column-start, row-end, column-end:

grid-row-start, specifying the row on which the item should start.
grid-column-start, specifying the column on which the item should start.
grid-row-end, specifying the row on which the item should end.
grid-column-end, specifying the column on which the item should end.

The grid-area property also specifies a name to a grid item. Then, named grid items can be referenced to by the grid-template-areas property of the grid container.

Initial Value	auto / auto / auto / auto
Applies to	Grid items.
Inherited	No.
Animatable	No.
Version	CSS Grid Layout Module Level 1
DOM Syntax	element.style.gridArea = "1 / 2 / span 2 / span 3";

Syntax

css

grid-area: <grid-line> / <grid-line> / <grid-line> / <grid-line> | <custom-ident> | initial | inherit;

Note: The shorthand accepts 1 to 4 values. If fewer than 4 values are provided, missing values default to auto. The span keyword can be used for the end values (e.g., span 2).

Example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: header;
      }
      .box2 {
        grid-area: left;
      }
      .box3 {
        grid-area: main;
      }
      .box4 {
        grid-area: right;
      }
      .box5 {
        grid-area: footer;
      }
      .grid-container {
        display: grid;
        grid-template-areas: 'header header header header header header' 'left main main main right right' 'left footer footer footer footer footer';
        gap: 5px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-area property example</h2>
    <p>You can use the grid-area property to name grid items.</p>
    <div class="grid-container">
      <div class="box1">Header</div>
      <div class="box2">Left</div>
      <div class="box3">Main</div>
      <div class="box4">Right</div>
      <div class="box5">Footer</div>
    </div>
  </body>
</html>

Result

CSS grid-area Property

In the following example, the box1 element is assigned the itemname value, which spans all five columns defined in the grid template. Note that since the grid only defines 5 columns, the remaining items automatically flow into the next row (implicit grid placement).

Example with itemname value

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: itemname;
      }
      .grid-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-areas: 'itemname itemname itemname itemname itemname';
        gap: 5px;
        background-color: #8ebf42;
        padding: 5px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-area property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Values

Value	Description
`<grid-line>`	Specifies the grid line where the item starts or ends. Accepts a number, `span <number>`, or `auto`.
`custom-ident`	Specifies a name for the item (used with `grid-template-areas`).
`initial`	Sets the property to its default value.
`inherit`	Inherits the property from the parent element.

Practice

What is the purpose of the CSS 'grid-area' property?

To specify a grid item’s size and location within the gridTo define the grid template for an HTML elementTo set the space between grid columnsTo set the margin properties in CSSTo position an item in a specific cell or an area

CSS grid-area Property ​

Syntax ​

Example ​

Result ​

Example with itemname value ​

Values ​

Practice ​

CSS grid-area Property

Syntax

Example

Result

Example with itemname value

Values

Practice