Take a look at this grid layout example with a maximum width constraint on the container:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 56px minmax(56px, auto) 56px;
max-width: 300px;
margin: auto;
}
header {
background-color: grey;
grid-column: 1 / span 3;
grid-row: 1 / 2;
}
main {
background-color: #2E64FE;
grid-column: 1 / span 2;
grid-row: 2 / 3;
}
aside {
background-color: #FF0040;
grid-column: 3 / span 1;
grid-row: 2 / 3;
}
footer {
background-color: grey;
grid-column: 1 / span 3;
grid-row: 3 / 4;
}
header, main, aside, footer {
line-height: 56px;
text-align: center;
vertical-align: middle;
}<html>
<body>
<div class='container'>
<header>Header</header>
<main>Main</main>
<aside>Sidebar</aside>
<footer>Footer </footer>
</div>
</body>
</html>Ideally, I want the header and footer backgrounds to extend beyond the container when the viewport width exceeds the maximum. However, I still want the grid structure to remain within the maximum width, just like in the example.
I've explored a couple of approaches:
- Using full-width containers with minmax values and positioning full-span divs underneath the header and footer for styling (https://codepen.io/anon/pen/OaryXj). This method adds extra elements and columns, which I'm not fond of.
- A similar approach as above but utilizing full-span headers and footers with "padding: 0 calc((100% - 900px)/2);" instead of added divs (https://codepen.io/anon/pen/BGvoxx). I find this confusing and it also adds extra columns to the grid.
Do you have any other ideas? Perhaps using calc() along with negative margins and padding on the header/footer?