CSS grid-area

The CSS grid-area property is used to define the location and size of a grid item in grid layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.abc {display: grid; grid-template-columns: auto auto auto; gap: 4px;}
      div.abc > div {border: 1px solid firebrick; padding: 10px;}
      #divOne {grid-area: 2 / 1 / span 3 / span 2;}
   </style>
</head>
<body>

   <div class="abc">
      <div id="divOne">This is France</div>
      <div>This is Canada</div>
      <div>This is United States</div>
      <div>This is Argentina</div>
      <div>This is Germany</div>
      <div>This is Italy</div>
      <div>This is Barcelona</div>
      <div>This is Austria</div>
   </div>
   
</body>
</html>

Output

This is France

This is Canada

This is United States

This is Argentina

This is Germany

This is Italy

This is Barcelona

This is Austria

In above example, consider the following CSS code:

#divOne {grid-area: 2 / 1 / span 3 / span 2;}

2 specifies the grid-row-start value, 1 specifies the grid-column-start value, span 3 specifies the number of rows to span, span 2 specifies the number of columns to span. Therefore, the div with id divOne starts from 2^nd row 1^st column and expands for next 3 rows and 2 columns.

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The grid-template-columns is used to define the number of columns to create in grid layout.

Note - The gap property is used to define the gap between rows and columns in grid layout.

CSS gird-area Syntax

The syntax of grid-area property in CSS, is:

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

The grid-area property is basically the shorthand of following CSS properties:

grid-row-start - used to define the starting row position of a grid item
grid-column-start - used to define the starting column position of a grid item
grid-row-end - used to span a grid item for specified number of rows. Or to define the ending row position of a grid item
grid-column-end - used to span a grid item for specified number of columns. Or to define the ending column position of a grid item

CSS grid-area: gridItemName Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.abc {display: grid; grid-template-areas: 'myar myar myar'; gap: 4px;
         background-color: peru;}
      div.abc > div {background-color: maroon; color: whitesmoke; padding: 10px;}
      .myClassOne {grid-area: myar; text-align: center;}
   </style>
</head>
<body>

   <div class="abc">
      <div class="myClassOne">jobails.com</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
   </div>
   
</body>
</html>

Output

jobails.com

Note - The grid-template-areas property is used to define the area of a/multiple grid item(s). Named grid items are referenced using the grid-template-areas property.

Note - Notice the quotes, that is 'myar myar myar'

Now the question is, what if we need to span the area of a particular grid item using its name, for not the complete row ?
The answer can easily be tracked using the example given below:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.abc {display: grid; grid-template-areas: 'myar myar myar . .'; gap: 4px;}
      div.abc > div {border: 1px solid firebrick; padding: 10px;}
      .myClassOne {grid-area: myar; text-align: center;}
   </style>
</head>
<body>

   <div class="abc">
      <div class="myClassOne">A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
      <div>H</div>
   </div>
   
</body>
</html>

Output

In above example, consider the following CSS code:

grid-template-areas: 'myar myar myar . .';

The first three columns refers to the grid item named myar, whereas the last two columns refers to random grid items.

Note - One period (.) refers to one random grid item. Therefore, two periods refers to two random grid items, in above example.

Another question is, what if we need to span the named grid item for multiple rows and columns ?
Again this answer, can also be tracked using following example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.abc {display: grid; gap: 4px;
               grid-template-areas: 'myar myar . . .' 'myar myar . . .' 'myar myar . . .';}
      div.abc > div {border: 1px solid firebrick; padding: 10px;}
      .myClassOne {grid-area: myar; text-align: center;}
   </style>
</head>
<body>

   <div class="abc">
      <div class="myClassOne">A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
      <div>H</div>
      <div>I</div>
      <div>J</div>
   </div>
   
</body>
</html>

Output

In above example, consider the following CSS code:

grid-template-areas: 'myar myar . . .' 'myar myar . . .' 'myar myar . . .'

From above code, the following one:

'myar myar . . .'

is used to span the grid item named myar for total of 5 columns with 3 random grid items. And since this is used for three times, therefore the same grid area with 5 columns gets created or spanned for 3 rows. Therefore, for clear understanding, you can also write the above code, in this way:

grid-template-areas: 'myar myar . . .'
                     'myar myar . . .'
                     'myar myar . . .';

CSS grid-area Example

This is the last example of grid-area property in CSS. This example is created to layout a WebPage using grid. I've named all grid items and uses those to create the layout:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; grid-template-areas: 'h h h' 'm c o' 'f f f';}
      div.container > div {border: 1px solid firebrick; padding: 10px; text-align: center;}
      #header {grid-area: h;}
      #menu {grid-area: m; min-height: 300px;}
      #content {grid-area: c; min-height: 300px;}
      #other {grid-area: o; min-height: 300px;}
      #footer {grid-area: f;}
   </style>
</head>
<body>

   <div class="container">
      <div id="header">Header</div>
      <div id="menu">Menu</div>
      <div id="content">Content</div>
      <div id="other">Other</div>
      <div id="footer">Footer</div>
   </div>
   
</body>
</html>

Output

Content

Other

To increase the area (column size) of any grid items say c (for content), increase its count in this way:

grid-template-areas: 'h h h h h h' 'm c c c c o' 'f f f f f f';

Now the size (width) of grid item having grid-area named c gets increased for 4 columns. Now the output will be:

Content

Other

CSS Online Test

« Previous Tutorial Next Tutorial »