CSS grid - grid-template-areas

The CSS property grid-template-areas defines named sections within a grid that outline the arrangement of the cells and identify them with specific names.

These sections aren't specifically linked to individual grid elements but can be accessed via the grid-placement properties grid-row-start, grid-row-end, grid-column-start, grid-column-end and their shorthand forms- grid-row, grid-column, and grid-area.

Possible values

  • The grid container doesn't contain any named grid regions.

  • A row is created for each unique string listed, while the cells of each string form individual columns.

    If multiple cell tokens in multiple rows have the same name, they're combined into a single-named grid region that spans those specific grid cells.

    However, if these cells don't form a rectangular shape, the declaration becomes invalid.

Syntax

grid-template-areas: none | <string> ;

Applies to

Grid containers.

CSS grid-template-areas - Named areas

The following example demonstrates defining named areas using grid-template-areas.

  • In the example given, the grid-template-areas property defines the layout structure by assigning named areas to certain grid cells.

  • Each character string in the value of the property represents a row, and individual character strings separated by spaces designate columns.

  • By assigning names to these areas, the grid layout is organized so that content can be placed in each named section accordingly.

<html>
<head>
<style>
   /* Define styles for the grid container */
   .grid-container {
      display: grid;
      grid-template-columns: repeat(5, 1fr); /* Five columns of equal width */
      grid-template-rows: 100px 200px 150px 100px; /* Four rows of different heights */
      grid-template-areas:
      "header header header main extra"
      "sidebar content content main extra"
      "sidebar content content main extra"
      "footer footer footer main extra";
      gap: 10px;
      font-size: 1.5em;
      height: 600px; /* Set a fixed height for demonstration */
      border: 1px solid #ccc;
      padding: 10px;
   }
   /* Define styles for the grid items */
   .header {
      grid-area: header;
      background-color: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .sidebar {
      grid-area: sidebar;
      background-color: #2ecc71;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .content {
      grid-area: content;
      background-color: #e74c3c;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .footer {
      grid-area: footer;
      background-color: #f39c12;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .main {
      grid-area: main;
      background-color: #9b59b6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .extra {
      grid-area: extra;
      background-color: #34495e;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
      <div class="footer">Footer</div>
      <div class="main">Main</div>
      <div class="extra">Extra</div>
   </div>
</body>
</html>

CSS grid-template-areas - Web Page Layout

In the following example the grid-template-areas attribute defines named grid areas for every layout segment.

The grid-template-areas allocates the header, article, navigation, advertisement, and footer within the grid, resulting in an organized web page layout.

<html>
<head>
<style>
   body { 
      display: grid;
      grid-template-areas: 
         "header header header"
         "nav article article"
         "ads ads footer";
      grid-template-rows: 80px 1fr 70px;  
      grid-template-columns: 20% 1fr 15%;
      grid-gap: 10px;
      height: 100vh;
      margin: 0;
      font-size:20px;
   }
   header, footer, article, nav, div {
      padding: 20px;
      background: #3498DB; 
      color: #fff; 
   }
   #pageHeader {
      grid-area: header;
   }
   #pageFooter {
      grid-area: footer;
   }
   #mainArticle { 
      grid-area: article;      
   }
   #mainNav { 
      grid-area: nav; 
   }
   #siteAds { 
      grid-area: ads; 
   }
</style>
</head>
<body>
<header id="pageHeader">Custom Header</header>
<article id="mainArticle">Main Content</article>
<nav id="mainNav">Navigation</nav>
<div id="siteAds">Advertisement</div>
<footer id="pageFooter">Custom Footer</footer>
</body>
</html>
Advertisements