Kevin Powell - Community•8mo ago

escaping the wrapper

Hey, is there a way to escape a wrapper on one side without using grid? I'm aware Kevin has made a video on this where he creates a grid with columns that mimics padding etc however if you weren't utilizing grid and using a simple, generic wrapper class that looks something like:

.wrapper {
  --padding: 1.5em;

  width: min(calc(90vw - var(--padding)), 1200px);
  margin-inline: auto;
}

.wrapper {
  --padding: 1.5em;

  width: min(calc(90vw - var(--padding)), 1200px);
  margin-inline: auto;
}

would there be a way to allow one side to overflow the gutter that could easily be implemented into an exception class e.g. <div class="wrapper wrapper--break"></div>? Thanks in advance

14 Replies

reddogg476•8mo ago

it is this one? https://www.youtube.com/watch?v=Ivk8Blw2VTI

Kevin Powell

YouTube

How to escape the container on only one side

🎓 If you’ve been writing CSS for awhile now but you’re having trouble making that next step up with is, you might be interested in my course CSS Demystified: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=full-width-one-side Having something be full-width on a website isn't hard, and there are even some neat t...

reddogg476•8mo ago

https://codepen.io/kevinpowell/pen/ZEmgQvV

Kevin

CodePen

full width split screen final

...

reddogg476•8mo ago

  /* make sure text doesn't touch the edge of the viewport 
   and the content is vertically centered */
  .full-width-split-screen > :not(img) {
    display: grid;
    align-content: center;
    justify-items: start;
  }

  /* make sure text doesn't touch the edge of the viewport 
   and the content is vertically centered */
  .full-width-split-screen > :not(img) {
    display: grid;
    align-content: center;
    justify-items: start;
  }

snxxwyy•8mo ago

it is indeed that one, and thank you for your help, however i was asking if there was a way to do it without using grid.

reddogg476•8mo ago

the section.class doesn't have to be grid. so '.full-width-split-screen > :not(img)' can be flex the images need resized, like in his codepen. flex looks like it will work

reddogg476•8mo ago

message.txt

reddogg476•8mo ago

^ replace CSS for playing

snxxwyy•8mo ago

i'm not sure if i'm misunderstanding what you mean so apologies if i am. but this to me looks like it just aligns the content in the center of the image. That's not quite what i'm trying to achieve. The way he is escaping the wrapper (getting one side of the content to touch the edge of the viewport whilst the other is still aligned with the rest of the pages content) is by using grid as he can set his content to overlap into his gutter by using grid-column. The foundation of it is using grid which is this section:

.full-width-split-screen {
  display: grid;
  grid-template-columns:
    minmax(var(--wrapper-padding-inline), 1fr)
    minmax(0, calc(var(--wrapper-max-width) / 2))
    minmax(0, calc(var(--wrapper-max-width) / 2))
    minmax(var(--wrapper-padding-inline), 1fr);
 }

.full-width-split-screen {
  display: grid;
  grid-template-columns:
    minmax(var(--wrapper-padding-inline), 1fr)
    minmax(0, calc(var(--wrapper-max-width) / 2))
    minmax(0, calc(var(--wrapper-max-width) / 2))
    minmax(var(--wrapper-padding-inline), 1fr);
 }

The portion of code i provided in my original question is another way of creating a wrapper, however since it doesn't utilize grid, i can't use grid-column to allow my content to pass into the gutter. I was asking if i could break out of the wrapper using that method without having to use a wrapper using grid.

reddogg476•8mo ago

/* ensure the image fill up the entire space available */ .full-width-split-screen > img { width: min(calc(50vw - 1.5rem), 100vw); height: auto; object-fit: cover; } that's not the wrapper, it's the breakout class (full width) using the same calc. the section will max to 100 viewport height, not 1200px like your code.

reddogg476•8mo ago

looks like a good start. i've not checked responsiveness

reddogg476•8mo ago

it's not too wide. image is on the left

reddogg476•8mo ago

two images is flexing, too:

reddogg476•8mo ago

i broke the middle sections but it looks like good bones

snxxwyy•8mo ago

alright, thank you, i'll play around with it.

Gaming

Programming

escaping the wrapper