CSS grid-area Property

A grid area is an area that covers multiple grid cells.

The grid-area property defines the boundaries for the area.

It is specified as start-row / start-column / end-row / end-column.

Example

#

Item 8 has a grid-area value of 1 / 2 / 5 / 6.
The area starts at row 1, column 2, and ends before row 5, column 6.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto auto auto auto;
  }

  .grid-container > div {
    background-color: aliceblue;
    padding: 15px 5px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div style="grid-area: 1 / 2 / 5 / 6; 
              color: white;
              background-color: salmon;">8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>  

Using grid-area

The grid-area is a shorthand property for:

Syntax

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

Values

#

Value Description
grid-row-start Row to start displaying the item.
grid-column-start Column to start displaying the item.
grid-row-end Row-line to stop displaying the item, or how many rows to span.
grid-column-end Column-line to stop displaying the item, or how many columns to span.
itemname Grid item name

Browser support

This table shows when grid-area support started for each browser.

Chrome
57 Mar 2017
Firefox
52 Mar 2017
IE/Edge
16 Sep 2017
Opera
44 Mar 2017
Safari
10 Sep 2016

You may also like

Guides