CSS
Adaptive Full-Page Grid Layout with Named Lines
Create a responsive full-page layout using CSS Grid's named lines and grid-template shorthand for header, main, and footer, adapting seamlessly to different screen sizes.
.grid-container {
display: grid;
grid-template:
"header" auto
"main" 1fr
"footer" auto
/ 1fr; /* Mobile layout: single column */
min-height: 100vh; /* Ensure container takes full viewport height */
}
.header { background-color: #f8f8f8; padding: 1rem; }
.main { background-color: #e0e0e0; padding: 1rem; }
.nav { background-color: #d0d0d0; padding: 1rem; }
.footer { background-color: #f8f8f8; padding: 1rem; }
@media (min-width: 768px) {
.grid-container {
grid-template:
[header-start] "header header" auto [header-end]
[main-start] "nav main" 1fr [main-end]
[footer-start] "footer footer" auto [footer-end]
/ 200px 1fr; /* Desktop layout: Nav (200px fixed) and Main (flexible) */
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }
}
How it works: This snippet demonstrates creating a responsive full-page layout using CSS Grid. It leverages the `grid-template` shorthand property with named grid lines for clarity and easier maintenance. For mobile devices, it's a simple single-column stack. On larger screens, it adapts to a two-column layout with a fixed-width navigation sidebar and a flexible main content area, all encompassed within a header and footer. This approach uses `grid-area` for placement but relies on the `grid-template` shorthand to define the structure and named lines, making it distinct from complex layouts defined solely by `grid-template-areas`.