如何使盒子内的内容保留在网格内，同时将盒子从网格中取出

Question

抱歉，标题被屠杀了，但我必须承认，我不知道是否有更好的术语来描述我正在努力实现的目标。相反，我包含了一张图片（他们往往会说一千个字）

我要创建的是青色框。我希望图片能解释这个想法。

已解决

根据 Kees van Lierop 的回答，我最终做了以下事情：

&__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;
  }
}

给我一个不错的结果：

Answer 1

您可以在方框左侧添加一个 :before pseudo-element，背景为青色：

.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;
    }
}

如何使盒子内的内容保留在网格内，同时将盒子从网格中取出

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

css

sass

bourbon