CSS
Design Responsive Full-Page Layouts with CSS Grid Areas
Master CSS Grid's named areas to build complex web page layouts (like Holy Grail), organizing header, sidebar, main content, and footer efficiently.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout with Areas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid-container">
<header class="grid-header">Header</header>
<nav class="grid-sidebar">Navigation</nav>
<main class="grid-main">
<h2>Main Content</h2>
<p>This is the primary content area of the page. It adapts to the grid layout.</p>
<p>More content here...</p>
</main>
<aside class="grid-aside">Aside Content</aside>
<footer class="grid-footer">Footer</footer>
</div>
</body>
</html>
body {
margin: 0;
font-family: sans-serif;
color: #333;
min-height: 100vh;
display: flex; /* Optional: for centering the grid container if smaller than viewport */
justify-content: center;
align-items: center;
background-color: #eee;
}
.grid-container {
display: grid;
width: 90%; /* Example width, can be 100% */
max-width: 1200px; /* Max width for larger screens */
min-height: 90vh; /* Occupy most of viewport height */
grid-template-columns: 1fr 4fr 1fr; /* Example: Nav | Main | Aside */
grid-template-rows: auto 1fr auto; /* Header | Main-Content | Footer */
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
gap: 15px; /* Spacing between grid items */
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
overflow: hidden; /* For rounded corners */
}
.grid-header {
grid-area: header;
background-color: #007bff;
color: white;
padding: 1rem;
text-align: center;
}
.grid-sidebar {
grid-area: sidebar;
background-color: #f0f0f0;
padding: 1rem;
}
.grid-main {
grid-area: main;
background-color: #ffffff;
padding: 1rem;
}
.grid-aside {
grid-area: aside;
background-color: #f0f0f0;
padding: 1rem;
}
.grid-footer {
grid-area: footer;
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
/* Basic responsiveness for smaller screens */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* Single column */
grid-template-areas:
"header"
"sidebar"
"main"
"aside"
"footer";
}
}
How it works: This snippet illustrates how to create a complex, responsive page layout using CSS Grid's `grid-template-areas` property. The `grid-container` is defined with `display: grid` and then `grid-template-columns` and `grid-template-rows` specify the sizes of the rows and columns. The `grid-template-areas` property provides a visual representation of the layout, naming different regions. Each child element then assigns itself to a named area using `grid-area`. This approach makes the layout highly readable and easy to modify, especially when combined with media queries to redefine the `grid-template-areas` for different screen sizes, like stacking all elements into a single column on smaller screens.