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

Question

请参考下图。我设置了一个网格（使用 Bourbon Neat）。第一个粉红色元素通常适合超过 5 列，但绿色元素需要从第 6 列开始，但结束时会突破网格并触及浏览器的边缘。我相当确定如果不使用 javascript，这是不可能的，但希望我能被证明是错误的！

有什么想法可以实现吗？

编辑：这需要在外部容器上使用最大宽度！

示例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

在这种情况下，我没有看到使用网格的理由，因为您实际上只是使用它来获得第一列的特定大小。您可以设置一个断点，使其超过某个最小尺寸，从而消除您的布局网格，然后您可以通过绝对定位简单地移动第二个 "column"。

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

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

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

How to make element break out of grid and touch edge of browser

css

bourbon

neat