Academy / Advanced Level: HTML and CSS

CSS Grid Advanced Features

Grid Template Areas for Intuitive Layouts

Grid template areas allow you to define named areas in your grid and then assign specific grid items to those areas. This makes your layout easier to understand and maintain.

Example:

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="nav">Nav</nav>
  <main class="main">Main Content</main>
  <aside class="sidebar">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav main"
    "sidebar footer";
  gap: 10px;
}

.header {
  grid-area: header;
}

.nav {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

In this example:

• The grid-template-areas property defines a clear layout structure.
• Named areas like header, nav, and footer are used to assign elements to specific regions of the grid.