如何使元素脱离网格并触摸浏览器的边缘

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

我有一个解决方案。这不是最漂亮的，但我确实认为它通常尊重 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;
}

Answer 2

在这种情况下，我看不出使用网格的理由，因为您实际上只是在使用它来获得第一列的特定大小。您可以设置一个超过某个最小尺寸的断点，以使您的布局不网格化，然后您可以简单地使用绝对定位移动第二个“列”。

如果您打算将第二列的溢出部分用于纯粹的设计目的并且它不包含任何内容，您可以使用第二列伪元素 :before 或 :after 进行绝对定位。