Extend column background into grid gutters - css

Question

Consider this…
You are creating three column layout using grid system. Your container is fixed sized and centered using margin:0 auto.
Your design specs calls for first column to have background color that extends to the left edge of browser.
Any idea how you can achieve this? I could make it work this way, which is kind of a hack and it may not work for certain kind of image backgrounds.
HTML:
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3<h2>
</div>
</div>
</section>
</main>
CSS
main {
min-width: 800px;
}
section {
background-image: linear-gradient(to right, #dfdfdf 50%, #fff 50%);
border-bottom: 1px solid #dfdfdf;
}
.container {
width: 500px;
margin:0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
section > * {
min-height: 200px;
}
.container > div {
background-color: #fff;
padding-left: 30px;
}

Answer 1

You could also generate the background using a pseudoelement.
The left value is large enough to keep the background extending out of the screen. It may be problematic if you need precise position of a background image.
Also, you could consider grid-gap instead of adding padding-left to the grid items.
body {
margin: 0;
}
main {
min-width: 800px;
}
section {
border-bottom: 1px solid #dfdfdf;
}
.container {
width: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
section>* {
min-height: 200px;
}
.container>div {
background-color: #fff;
padding-left: 30px;
}
header {
position: relative;
}
header:before {
content: '';
background: lightgrey;
display: block;
position: absolute;
left: -50vw;
right: 0;
bottom: 0;
height: 100%;
z-index: -1;
}
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3</h2>
</div>
</div>
</section>
</main>

Answer 2

You could try making the columns stretch the full width of the container, and then aligning the content inside to appear as three centered columns.
.container {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-column-gap: 20px;
min-height: 50px;
}
header {
background-color: lightgray;
display: flex;
justify-content: flex-end;
}
section {
border-bottom: 1px solid #dfdfdf;
}
body {
margin: 0;
}
p { text-align: center;}
p > span { padding: 5px; background-color: aqua; }
<main>
<section>
<div class="container">
<header>
<h1>Hey There!</h1>
</header>
<div>
<h2>Column 2</h2>
</div>
<div>
<h2>Column 3</h2>
</div>
</div>
</section>
</main>
<p><span>True Center</span></p>
codepen demo