CSS - grid-area Property

Quiz

CSS grid-area is a shorthand property that defines the location and size of the grid item within a grid layout. Grid areas are created by defining named grid areas within the grid container using the grid-template-areas property. The grid-area property is a shorthand for the following individual grid-related properties: grid-row-start grid-column-start grid-row-end grid-column-end

Syntax

grid-area: auto | grid-row-start / grid-column-start / grid-row-end / grid-column-end | item name;

Property Values

Value	Description
auto	It specifies that the size of the element varies according to the content.
grid-row-start	It specifies on which row to start showing the item.
grid-column-start	It specifies on which column to start showing the item.
grid-row-end	It specifies on which row-line to stop showing the item or how many rows to span the item.
grid-column-end	It specifies on which column-line to stop showing the item or how many columns to span the item.
item name	It specifies a name for the grid item

Examples of CSS Grid Area Property

The following examples explain the grid-area property with different values.

Grid Area Property with Auto Value

To make a grid item to automatically span the number of rows or columns required based on its content or the implicit grid structure, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-columns: auto auto auto;
         padding: 10px;
         height: 300px;
         gap: 10px;
      }

      .container>div {
         text-align: center;
         color: white;
         padding: 15px;
         background-color: lightcoral;
         grid-area: auto;
      }
   </style>

</head>

<body>
   <h2>
      CSS grid-area property
   </h2>
   <h4>
      grid-area: auto
   </h4>
   <div class="container">
      <div>
         1
      </div>
      <div>
         2
      </div>
      <div>
         3
      </div>
      <div>
         4
      </div>
      <div>
         5
      </div>
      <div>
         6
      </div>
      <div>
         7
      </div>
   </div>
</body>

</html>

Grid Area Property with Custom Indent Values

To make an element of grid layout take custom space specified by the user, we specify four value to the grid-area property. The values represent grid-row-start, grid-column-start, grid-row-end and grid-column-end in order. Depending on the values provided, the postion of the element will be affected. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{
         display: grid;
         background-color: lightblue;
         grid-template-columns: auto auto auto;
         padding: 10px;
         height: 300px;
         gap: 10px;
      }
      .container > div{
         text-align: center;
         color: white;
         padding: 15px;
         background-color: lightcoral;
      }
      .second{
         grid-area: 3 / 2 / span 4 / span 3;
      }
   </style>

</head>
<body>
   <h2>
      CSS grid-area property
   </h2>
   <h4>
      grid-area: 3 / 2 / span 4 / span 3 
      (item is placed at row-3 col-2 and 
      spans 4 alog the row and span 3 
      along the columns.)
   </h4>
   <div class="container">
      <div>
         1
      </div>
      <div class="second">
         2
      </div>
      <div>
         3
      </div>
      <div>
         4
      </div>
      <div>
         5
      </div>
      <div>
         6
      </div>
      <div>
         7
      </div>
   </div>
</body>
</html>

Grid Area Property with Named Grid Items

To position an element in a grid layout, we can use grid property to define a grid template with named areas. Each name represents a grid cell or a group of cells where grid items can be placed. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid: 
         ' . . boxspace boxspace . .' 
         ' . . boxspace boxspace . .' 
         ' . . boxspace boxspace . .';
         padding: 10px;
         height: 200px;
         gap: 10px;
      }

      .container>div {
         text-align: center;
         color: white;
         padding: 15px;
         background-color: lightcoral;
      }

      .item3 {
         grid-area: boxspace;
      }
   </style>

</head>

<body>
   <h2>
      CSS grid-area property
   </h2>
   <h4>
      grid-area: boxspace (grid space name is used here;
      the selected element takes the width of 2 columns
      (3 and 4) and has three rows height)
   </h4>
   <div class="container">
      <div>
         1
      </div>
      <div>
         2
      </div>
      <div class="item3">
         3
      </div>
      <div>
         4
      </div>
      <div>
         5
      </div>
      <div>
         6
      </div>
      <div>
         7
      </div>
      <div>
         8
      </div>
      <div>
         9
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
grid-area	57	16	52	10	44

css_properties_reference.htm

Print Page