Kevin Powell - Community•2w ago

Two Column Layout, but the other one goes to edge.

Hi everyone, may I ask the best way to make a layout like this responsively? The red square will be an image. The red line indicates the container of the site. But the image should go way to the edge of the view port. Thank you for the response.

6 Replies

Nibelung ValestiOP•2w ago

TLDR; The content should be inside the container but the image should span to the right edge

Chris Bolson•2w ago

~~It would be best if you shared your code on Codepen or similar. Other wise it is just guess work.~~ Sorry, I miss-read this post.

Fancy Nancy•2w ago

Use relative positioning + negative margin on the image container. Example:

<div class="container">
    <div class="text-section">
        <p>text</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
</div>

<div class="container">
    <div class="text-section">
        <p>text</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
</div>

.container {
    display: flex;
    max-width: 60rem; /* Whatever max width you prefer */
    margin: 0 auto;
    padding: 1rem;
}

.text-section {
    flex: 1;
    padding: 1rem;
}

.image-section {
    flex: 1;
    right: 50%;
    margin-right: -50vw;
    position: relative;
}

.image-section img {
    width: 100vw;
}

.container {
    display: flex;
    max-width: 60rem; /* Whatever max width you prefer */
    margin: 0 auto;
    padding: 1rem;
}

.text-section {
    flex: 1;
    padding: 1rem;
}

.image-section {
    flex: 1;
    right: 50%;
    margin-right: -50vw;
    position: relative;
}

.image-section img {
    width: 100vw;
}

clevermissfox•2w ago

With the tools available nowadays like grid this solution is kind of hack imo But also depends on the project size and use case Setting up a grid system like this could do it but if it’s a small project , I may instead use a pseudo element for the image

Kevin Powell

YouTube

A new approach to container and wrapper classes

The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...

Fancy Nancy•2w ago

Oh, neat! That is indeed a much more elegant solution. Updating my previous answer:

<div class="grid-container">
    <div class="text-section">
        <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
  <div class="content-section">Another section</div>
</div>

<div class="grid-container">
    <div class="text-section">
        <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
    <div class="image-section">
        <img src="your-image.jpg" alt="Image description">
    </div>
  <div class="content-section">Another section</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 
        [full-width-start]
        10vw
        [content-start]
        1fr 1fr 
        [content-end]
        10vw
        [full-width-end];
}

.grid-container > * {
  padding: 2rem;
}

.text-section {
    grid-column: content-start;
}

.image-section {
    grid-column: 3 / full-width-end;
}

.content-section {
  grid-column: content;
}

.image-section img {
    width: 100%;
}

.grid-container {
    display: grid;
    grid-template-columns: 
        [full-width-start]
        10vw
        [content-start]
        1fr 1fr 
        [content-end]
        10vw
        [full-width-end];
}

.grid-container > * {
  padding: 2rem;
}

.text-section {
    grid-column: content-start;
}

.image-section {
    grid-column: 3 / full-width-end;
}

.content-section {
  grid-column: content;
}

.image-section img {
    width: 100%;
}

I am Groot•6d ago

If you want to stick to the naming concept of grid-lines, you could create another grid-line-name of [center-line] min(100% - (var(--padding-inline) * 2), 100% / 2; that way you could over-engingeer this correctly and change .image-section { grid-column: center-line / full-width-end

Gaming

Programming

Two Column Layout, but the other one goes to edge.