Live Responsive Grid Example
This example demonstrates a typical webpage layout
created with CSS Grid. It adapts to different screen sizes.
Header
Main Content
This is the main content area.
It's where the primary information of the page resides.
On larger screens, it's typically the widest column.
As the screen size decreases, its layout might change
to ensure readability.
Sidebar
The sidebar often contains supplementary
information, links, or advertisements.
On smaller screens, it might be repositioned
below the main content or hidden.
Notice how the "Navigation", "Main Content", and "Sidebar"
areas rearrange themselves based on the window width.
The distinct background colors help visualize these different grid areas.
Full-Page Grid Layout
For a robust full-page layout, you can apply
CSS Grid directly to the <body> element.
This approach uses semantic HTML tags like
<header>, <nav>, <main>, <aside>, and <footer>
as grid items, creating a clean and accessible structure.
<body>
<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</body>CSS Implementation
In the CSS, you define the grid on the <body>.
The grid-template-areas property maps the
semantic elements to the desired layout.
Media queries are then used to create a responsive
design that adapts to different screen sizes.
/* Assign grid areas to semantic elements */
header { grid-area: header-area }
nav { grid-area: nav-area }
main { grid-area: main-area }
aside { grid-area: aside-area }
footer { grid-area: footer-area }
body {
display: grid;
min-height: 100vh;
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr 200px;
grid-template-areas:
"header-area header-area header-area"
"nav-area main-area aside-area "
"footer-area footer-area footer-area";
gap: 10px;
}
/* Everything below each other on small screens */
@media (max-width: 768px) {
body {
grid-template-columns: 1fr;
grid-template-areas:
"header-area"
"nav-area "
"main-area "
"aside-area "
"footer-area";
}
}