I’ve been grappling with finding a consistent method to ensure uniform white space for all containers like this:
https://i.stack.imgur.com/wtk0G.png
Important: The grey rectangle signifies an image. My goal is for it to extend to the viewport's end, originating from its respective column.
This is what I have written so far:
HTML:
<div class="container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="grid">
<div class="grid__content-wrapper">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="grid__image-wrapper">
<img src="https://w.wallhaven.cc/full/9m/wallhaven-9mjoy1.png" alt="" class="grid__img"/>
</div>
</div>
CSS / SCSS:
.container {
max-width: 127rem;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 3rem;
&__content-wrapper {
}
&__image-wrapper {
}
&__img {
display: block;
width: 100%;
height: auto;
}
}
I’m aiming to find a solution that aligns the left margin of the .grid section consistently with the .container layout while allowing the image to stretch beyond the maximum width up to the grid's end. Any guidance on how to approach this challenge would be greatly appreciated!