画面端から引っ張るデザインのメモ

コーディングデザインで画面の端からのデザインがありましたので、そのデザイン方法。
先にコードから

<div class="container">
   <div class="children">

   </div>
</div>

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
}

.children{
    max-width: calc(100vw - (50% - (1200px / 2)));
    width: calc(100% - 0px);
}

上のコードは最大幅が１２００pxの時の例
(50% - (1200px / 2))で左右余白の半分の幅が求まり-100vwすることで、範囲が画面端からコンテナ端まで伸びます。
コンテナの中で幅を狭めたいときは.childrenのwidthにその値を引く。
下の参考記事はより詳しく書いています。

参考

CSSのcalcで片側だけグリッドガイドライン外へ飛び出したカラム

containerの片方だけ100%に広げて外側に出したい。