CSS
CSS Grid Full-Width Sections with Centered Content
Achieve a common web layout with full-width header/footer and a max-width, horizontally centered main content area using CSS Grid for structure.
.page-layout {
display: grid;
grid-template-columns: 1fr min(1200px, 90%) 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
". content ."
"footer footer footer";
min-height: 100vh;
}
header {
grid-area: header;
background-color: #f8d7da;
padding: 20px;
text-align: center;
}
main {
grid-area: content;
background-color: #d1ecf1;
padding: 20px;
}
footer {
grid-area: footer;
background-color: #d4edda;
padding: 20px;
text-align: center;
}
How it works: This CSS Grid snippet creates a layout where the header and footer span the full width, while the main content is centered and constrained to a maximum width. `grid-template-columns` uses three columns: two `1fr` side columns for fluid spacing, and a middle column with `min(1200px, 90%)` to define the centered content's width. `grid-template-areas` then assigns the header and footer to span all three columns, and the main content to the middle column, effectively centering it.