如何使元素突破网格和触摸浏览器的边缘

Question

请参考下图。我有一个网格设置（使用Bourbon Neat）。第一个粉红色元素通常适合5列，但绿色元素需要从第6列开始，但最终会突破网格并触及浏览器的边缘。我非常确定在不使用javascript的情况下这是不可能的，但希望我被证明是错的！

任何想法如何实现这一目标？

编辑：这需要在外部容器上使用max-width！

示例HTML：

<div class="container">
 <div class="pink"></div>
 <div class="green"></div>
</div>

波旁：

.container{
  @include outer-container();
}
.pink{
  @include span-columns(5);
}
.green{
  @include span-columns(7);
  // What to do here???
}

Answer 1

在这种情况下，我没有看到使用网格altogother的原因，因为你实际上只是用它来获得第一列的特定大小。您可以设置一个超过特定最小尺寸的断点，对您的布局进行去栅格化，然后您可以通过绝对定位简单地移动第二个“列”。

如果您打算将第二列的溢出部分用于纯粹的设计目的并且它不包含任何内容，您可以使用第二列伪元素渲染它：在绝对定位之前或之后。

Answer 2

我有一个解决方案。它不是最漂亮的，但我认为它通常是对Neat系统的尊重。在CodePen上：https://codepen.io/alexbea/pen/LRxXpO。

粉红色和绿色（在我的例子中是紫色和青色）最终被包裹在他们自己的容器中，这些容器完成与网格对齐的工作。第二列通过使用等于填充的负右边距来突破。在这种情况下，使用vw进行填充可以实现简单的一致性。您可能需要针对您的情况调整值。

HTML

<div class="container">
 <div class="first"><div class="pink"></div></div>
 <div class="second"><div class="green"></div></div>
</div>

SCSS

.container {
  @include outer-container(100%);
  @include pad(2vw);
}

.first { @include span-columns(5); }
.second { @include span-columns(7); }

.pink,
.green { height: 100px; }

.pink { background-color: pink;}
.green {
  background-color: green;
  margin-right: -2vw;
}