全幅と固定幅を組み合わせたレイアウト

説明

固定幅でセンタリングさせつつ、一部のコンテンツは画面いっぱいの幅にしたい場合があります。

そういった際に、これまではネガティブマージンやvw単位などを駆使して実装していました。

CSS Gridを使えば、そういったトリッキーなことをせずとも、実現できます。

懸念点

このレイアウト方法では、.Content直下の子要素がすべてグリッドアイテムになります。そのため、グリッドアイテム同士のマージン・コラプスが起こらなくなります。その点にさえ注意すれば便利に使うことができます。

HTML

<div class="Content">
  <div class="Content_Box">
    Fixed Width Content
  </div>
  <div class="Content_Box -Full">
    Full Width Content
  </div>
  <div class="Content_Box">
    Fixed Width Content
  </div>
  <div class="Content_Box -Full">
    Full Width Content<br>
    Full Width Content
  </div>
  <div class="Content_Box">
    Fixed Width Content<br>
    Fixed Width Content<br>
    Fixed Width Content
  </div>
</div>

このHTMLへ修正リクエストをする

CSS

.Content {
  display: grid;
  grid-template-columns:
    [full-start]
    minmax(20px, 1fr)
    [main-start] minmax(0, 400px) [main-end]
    minmax(20px, 1fr)
    [full-end];
}

.Content > * {
  grid-column: main;
}

.Content > .-Full {
  grid-column: full;
}

/* 装飾 */
body {
  margin: 0;
}

.Content_Box {
  padding: 10px;
  background-color: #f0f1f1;
  text-align: center;
}

.Content_Box.-Full {
  background-color: #ccc;
  color: #111;
}

このCSSへ修正リクエストをする