Imagine this...
You're working on a layout with three columns, all within a fixed-sized container that is centered using margin:0 auto.
The design requires the first column to have a background color that reaches the left edge of the browser window.
Do you know how to make this happen? I came up with a solution here, although it might not work well with certain types of image backgrounds.
HTML:
<main>
<section>
<div class="container">
<header>
<h1>Hello!</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;
}