ブラウザのグリッドとタッチの端から要素を分割する方法

Question

下の画像を参照してください。私はグリッドを設定しました（バーボン・ニートを使用しています）。最初のピンクの要素は通常5列に収まりますが、緑の要素は6番目の列から始める必要がありますが、グリッドから飛び出してブラウザの端に触れます。私はかなりこれはjavascriptを使用せずに可能ではないと確信していますが、うまくいけば私は間違って証明することができます！

これを行う方法はありますか？

EDIT：これは、外側のコンテナで最大幅で作業する必要があります。

例HTML：

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

ブルボン：あなたは本当にそれだけを使用しているので、私は、グリッドaltogotherを使用する理由は表示されません。この場合

.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。

ピンクとグリーン（私の例では紫色と青色）は、自分のコンテナにラップされ、グリッドに合わせる作業を行います。 2番目の列は、パディングに等しい負の右マージンを使用して解除されます。パディングに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

最初の列で特定のサイズを取得します。ブレークポイントを設定して、レイアウトをグリッド解除した特定の最小サイズを設定し、2番目の「列」を絶対配置で移動するだけで済みます。

2番目の列のオーバーフロー部分を純粋な設計目的で使用する予定で、内容が含まれない場合は、2番目の列pseudoelements：beforeまたは：afterを絶対配置で使用してレンダリングできます。