CSS - grid-template-areas Property

Quiz

CSS grid-template-areas property defines named sections within a grid that outline the arrangement of the cells and identify them with specific names. The element of the grid can then use these name to refer to the specific region using the grid-area property.

Syntax

grid-template-areas: none | item-names;

Property Values

Value	Description
none	It specifies no named regions in the grid layout.
item-names	It is a string sequence with region names that specify the sizes of the rows and columns.

Examples of CSS Grid Template Areas Property

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

Grid Template Areas Property with None Value

To not have any named regions in the grid layout and the items displayed in their natural flow, we use the none value. The size of the items depend on their content. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightgrey;
         grid-gap: 10px;
         padding: 20px;
      }

      .container > div 
         padding: 20px;
         text-align: center;
         color: white;
         border: 3px solid blue;
         background-color: #4775d1;
         grid-template-areas: none;
   </style>
</head>

<body>
   <h2>
      CSS grid-template-areas property
   </h2>
   <h4>
      grid-template-areas: none
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
   </div>

</body>

</html>

Grid Template Areas Property with Named Areas

To have specific named regions in the grid layout, we specify string sequences with region names to the grid-template-areas property. Each individual string sequence represents a row and the number of names inside the string represent the number of columns. The grid-area property has to be used to refer to the region. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightgrey;
         grid-gap: 10px;
         padding: 20px;
      }

      .container>div {
         padding: 20px;
         text-align: center;
         color: white;
         border: 3px solid blue;
      }

      .container1 {
         grid-template: 
         'header header header header' 
         'sidebar1 content content sidebar2' 
         'footer footer footer footer';
      }

      .container2 {

         grid-template: 
         '. . . .' 
         '. . item item';
      }

      .container2>div {
         background-color: lightcoral;
      }

      .cont1-item1 {
         background-color: #05445e;
         grid-area: header;
      }

      .cont1-item2 {
         background-color: #75e6da;
         grid-area: sidebar1;
      }

      .cont1-item3 {
         background-color: #189ab4;
         grid-area: content;
      }

      .cont1-item4 {
         background-color: #8bcd50;
         grid-area: footer;
      }

      .cont1-item5 {
         background-color: #75e6da;
         grid-area: sidebar2;
      }

      .cont2-item1 {
         grid-area: item;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-areas property
   </h2>
   <p>
      <strong>
      grid-template-areas: 'header header header header'
      'sidebar1 content content sidebar2' 
      'footer footer footer footer'
      </strong> 
   ; The layout has three rows indicated by three
   separate strings and four columns 
   indicated by the number of items inside 
   strings ' '
   </p>
   <div class=" container container1">
      <div class="cont1-item1">
         This is header
      </div>
      <div class="cont1-item2">
         This is sidebar1
      </div>
      <div class="cont1-item3">
         This is content
      </div>
      <div class="cont1-item4">
         This is footer
      </div>
      <div class="cont1-item5">
         This is sidebar2
      </div>
   </div>
   <p>
      <strong>
      grid-template-areas: '. . . .''. . item item'
      </strong> 
   ; the layout has 2 rows and 4 columns, item1 is placed
   in the second row and takes 2 columns space.
   </p>
   <div class=" container container2">
      <div class="cont2-item1">
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
   </div>

</body>

</html>

Supported Browsers

Property
grid-template-areas	57	16	52	10	44

css_reference.htm

Print Page