Search code examples
csssassbourbon

How do you make content inside a box stay inside the grid, while breaking the box out of the grid

Sorry for title butchering, but I must admit I have no clue if there are better terms to describe what I'm trying to achieve. Instead I've included an image (they tend to say a thousand words)

enter image description here

What I'm trying to create is the cyan box. I hope the image kind of explains the idea.

SOLVED

Per Kees van Lierop answer I ended up doing the following:

&__label {
  @include span-columns(6);
  margin-top: 4rem;
  background-color: rgba($color-secondary, 0.5);
  color: white;
  padding: $base-padding;
  position: relative;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    width: 9999px;
    height: 100%;
    background-color: inherit;
  }
}

Giving me a nice result:

enter image description here

Solution

  • You can add a :before pseudo-element which is positioned left to the box, and with the cyan background:

    .cyan-box {
    position: relative;

    &:before {
        position: absolute;
        top: 0;
        right: 100%;
        width: 10000000px; // a large amount, long enough to reach the edge
        height: 100%;
        content: '';
        display: block;
        background: cyan;
    }
}