CSS grid - grid-area Property

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:

  • auto − It automatically determines the position of the grid item within the grid layout or defaults to span of 1.

  • <custom-ident> − If there's a line labelled with <custom-ident>-start or <custom-ident>-end, the grid item will be positioned along that line.

    • When a named grid area is used, implicit named lines are generated automatically. If you use grid-area: fooarea;, the grid item will be placed at the beginning or end of the grid area named fooarea, unless you have already defined a specific line for the start or end of fooarea.

  • <integer> && <custom-ident>? − If a name is given, only lines with that name are considered. If there are insufficient lines with that name, all grid lines are processed as if they have that name in order to determine the correct position. An <integer> value of 0 is not valid.

  • span && [ <integer> || <custom-ident> ] − When a name is specified as a custom-ident, only lines with that name get considered. If there are insufficient lines with that name, we consider all the grid lines on the relevant side of the grid to have that name for counting purposes. If the <integer> is not specified, the default value is 1. Negative numbers or 0 are not allowed.

Applies to

Grid items and absolutely-positioned boxes whose containing block is a grid container.

DOM Syntax

object.style.gridArea = "auto|<custom-ident>|<integer> && <custom-ident>?|span && [ <integer> || <custom-ident> ]";

Point to be remembered

CSS grid-area - auto Value

The following example demonstrates that grid-area: auto property automatically determines the placement of this grid item on the avilable space in the grid −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      grid-template-rows: repeat(2, 50px);
      grid-gap: 10px;
   }
   .grid-container > div {
      background-color: red;
      color: white;
      padding: 10px;
      text-align: center;
   }
   .grid-item {
      grid-area: auto;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid Item 1</div>
      <div>Grid  Item 2</div>
      <div class="grid-item">Grid Auto Item 3</div>
      <div>Grid Item 4</div>
      <div>Grid Item 5</div>
      <div>Item 6</div>
   </div>
</body>
</html>

CSS grid-area - <custom-ident>

The grid layout has three rows and four columns with named row1, row2, row3 and col1, col2, col3, col4, col5.

The following example demonstrates that grid-area: row1 / third / row3 / last; property, the second grid item spans the grid area between the first and third rows, starting from the column with the name col3 to the column with the name col5 −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-rows: [row1] 50px [row2] 50px [row3] 50px;
      grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4] 1fr [col5];
      gap: 10px;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      padding: 10px;
      text-align: center;
   }
   .grid-item {
      grid-area: row1 / col3 / row3 / col5;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div>Grid Item 3</div>
      <div>Grid Item 4</div>
      <div>Grid Item 5</div>
      <div>Grid Item 6</div>
      <div>Grid Item 7</div>
      <div>Grid Item 8</div>
   </div>
</body>
</html>

CSS grid-area - <integer> && <custom-ident>?

The grid layout has five rows and four columns (p, q and m, n).

The following example demonstrates that grid-area: 2 q / 1 n / 4 q / 3 n; - here the second grid item starts from the second row (q) and spanning from the first column (n) to the third column (n). −

The following diagram demonstrates the grid layout with lines:

grid area 
<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-rows: [p] 50px [q] 50px [q] 50px [q] 50px  [q];
      grid-template-columns: [m] 200px [n] 200px [n] 200px [n];
      gap: 10px;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      padding: 10px;
      text-align: center;
   }
   .grid-item {
      grid-area: 2 q/ 1 n / 4 q / 3 n; 
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div>Grid Item 3</div>
      <div>Grid Item 4</div>
      <div>Grid Item 5</div>
      <div>Grid Item 6</div>
      <div>Grid Item 7</div>
      <div>Grid Item 8</div>
   </div>
</body>
</html>

CSS grid-area - span value

The following example demonstrates that grid-area: 2 / 2 / span 2 / span 2 property, the second grid item starting at the second row and second column, spanning two rows and two columns −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template: auto auto;
      color: white;
      text-align: center;
      width: 300px;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      padding: 10px;
   }
   .grid-item2 {
      grid-area: 2 / 2 / span 2 / span 2;
   }   
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div class="grid-item2">Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>
Advertisements