CSS grid-template-areas

The CSS grid-template-areas property is used to define the area of a/multiple grid item(s) in grid layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
         grid-template-areas: 'myarea myarea . .';}
      .container > div {background-color: purple; padding: 10px; text-align: center;}
      #one {grid-area: myarea;}
   </style>
</head>
<body>

   <div class="container">
      <div id="one">A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
   </div>
   
</body>
</html>

Output

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

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

Note - The grid-area property is used to define the location and size of a grid item.

In above example, since myarea is the name of area of a DIV element whose id is one. Therefore, using the following CSS code:

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

The first two columns assigns to the area named myarea, whereas the last two columns are assigned to random grid items. One period (.) refers to one random grid item.

CSS grid-template-areas Syntax

The syntax of grid-template-areas property in CSS, is:

grid-template-areas: x;

The value of x should be either none or the name of grid item. The none is the default value of grid-template-areas property.

CSS grid-template-areas Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {display: grid; gap: 2px; grid-template-areas: 'h h' '. .' 'f f';}
      .container > div {border: 2px solid chocolate; padding: 10px; text-align: center;}
      #header {grid-area: h;}
      #footer {grid-area: f;}
   </style>
</head>
<body>

   <div class="container">
      <div id="header">A</div>
      <div id="menu">B</div>
      <div>
         Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores, delectus ipsa? 
         Temporibus excepturi laboriosam eveniet, commodi inventore impedit. Repellat deserunt 
         nobis, placeat voluptate quas accusantium sequi modi maiores, explicabo esse veritatis
         perspiciatis assumenda, nemo necessitatibus repudiandae possimus facilis doloremque
         voluptatibus iure aperiam expedita. Incidunt ullam id voluptate blanditiis et nisi qui
         ipsa ratione, culpa ut at nulla laborum. Delectus omnis at sapiente assumenda?
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, dolore!
      </div>
      <div id="footer">D</div>
   </div>
   
</body>
</html>

Output

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores, delectus ipsa? Temporibus excepturi laboriosam eveniet, commodi inventore impedit. Repellat deserunt nobis, placeat voluptate quas accusantium sequi modi maiores, explicabo esse veritatis perspiciatis assumenda, nemo necessitatibus repudiandae possimus facilis doloremque voluptatibus iure aperiam expedita. Incidunt ullam id voluptate blanditiis et nisi qui ipsa ratione, culpa ut at nulla laborum. Delectus omnis at sapiente assumenda? Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, dolore!

CSS Online Test

« Previous Tutorial Next Tutorial »