近年のウェブデザインのトレンドに、あえてグリッドラインに沿わせずに不規則に崩したようなレイアウトがよくみられます。このレイアウトは「ブロークングリッド」と呼ばれるレイアウトで、余白を活かした抜け感のあるデザインであったり、ダイナミックなレイアウトでアニメーションを際立たせるなどの効果があります。ただし、レスポンシブ対応が必要となる中でこのようなレイアウトのコーディングは少しコツがいります。今回はこのようなブロークングリッドのレイアウトをコーディングするときに使えるCSSのテクニックをサンプルと合わせてみていきたいと思います。  

1. 不揃いにずらして重ね合わせる

まずは比較的簡単に実装できる、グリッド上に並んでいるところから不揃いになるようにずらして重ね合わせるレイアウトです。画像とテキストコンテンツを2カラムで並べるようなケースでよく見かけますね。利用される場面も多いのではないでしょうか。このレイアウトは基本的にまずはきっちりとグリッド状に揃えてレイアウトを組んでから、表示位置の移動や幅を調整することで実現していきます。   実際にコードを見ていきます。HTMLはこのような形で、各要素を囲むように入れ子で用意します。そして、CSSでFlexboxやGridなどで、しっかりとグリッドレイアウトを完成させます。その上で、ずらして表示させる要素に対して、transformで表示位置をずらすように移動させ、ネガティブマージンを適用することで、背面要素に重なるよう要素の幅を調整すると完成です。

<div class="row">
  <div class="column column--background">背面に配置する要素</div>
  <div class="column column--foreground">前面に配置する要素</div>
</div>

.row {
  display: flex;
}
.column--background {
  align-self: flex-start;
  width: 60%;
}
.column--foreground {
  align-self: flex-end;
  width: calc(40% + 100px);
  margin-left: -100px;
  transform: translate(0, 60px);
}

  こういったレイアウトは、Flexboxなどでグリッドレイアウトにしてから、transfromとマイナス値のマージンで重なるようにずらしていくと覚えておくと良いですね。ベースがグリッドレイアウトで組まれているため、レスポンシブにも柔軟に対応することが可能です。ですので、出来るだけ絶対位置指定で実装するのは避けましょう。このレイアウトのサンプルはこちらに用意しています。    

2. コンテンツ幅を持つ親要素の領域を超えて画面幅で表示

続いてこちらもよく見かける、コンテンツ幅を持つ親要素に収まる子要素をその親要素の領域を超えて画面幅いっぱいまで広げて表示させるレイアウトです。画面幅用のセクションとコンテンツ用のセクションを分けるとそのまま簡単に実装できますが、どうしてもHTMLが複雑になってしまうため、できれば1つの要素にまとめたいですね。HTMLはこのような形で、祖先要素から画面幅に広がるラッパー要素の配下に、コンテンツ幅を持つコンテナ要素、その中にコンテンツ要素という構成です。コンテンツ要素はコンテンツ幅の要素内に含まれるため、このままですと画面幅まで広げることができません。そこでCSS側で親要素を超える幅になるように調整していきます。

<div class="wrapper">
  <div class="container">
    <div class="inner inner--full-width">親要素の領域を超えて画面幅で表示させる要素</div>
    <div class="inner">コンテンツ幅内に収める要素</div>
  </div>
</div>

:root {
  --container-width: 1000px;
}
.wrapper {
  overflow: hidden;
}
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}
.inner {
  width: 100%;
}
.inner.inner--full-width {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

  今回のレイアウトではコンテンツ幅が重要になるので、変数として値を保持しておくと便利です。コンテナ要素には最大幅がコンテンツ幅になるように設定していきます。そして中身となるコンテンツ要素で画面幅に広がるものに対して、画面幅と等しくなるように幅を設定します。そのままですと、コンテンツ幅の左端位置が基準となるので、画面左端になるように左右のmarginを調整することで実現できます。最後に、vwを使って画面幅になるよう指定した場合には、スクロールバーの幅を考慮しておく必要があるため、その分だけ画面外にはみ出して横スクロールが発生してしまうことがあります。そのため最初に用意した画面幅に等しい幅をもつラッパー要素に対して、overflow: hidden;を設定しておくことが重要です。このレイアウトのサンプルはこちらに用意しています。    

3. コンテンツ幅を基準に重ねて配置し画面幅に合わせて可変幅で表示

最後は少し複雑になりますが、コンテンツ幅の境界を基準に2つの要素をずらして重ねるように配置して、かつ画面サイズに対応した幅になるレイアウトです。説明ではなかなか伝わりにくいと思いますので、ぜひサンプルも合わせてご覧ください。画面全体に広がるように見せつつも、ブロークングリッドのバランスを活かしたいというときに効果的なレイアウトです。実装方法としては、先ほどの応用となります。今回も幅指定の単位にvwを使うので、横スクロールを防ぐためにラッパー要素で全体を囲むようにしておきます。そして、配置場所の基準となるコンテンツ幅を持つコンテナ要素に、実際のコンテンツを並べる要素が入ります。デザインにもよりますが、絶対位置指定でレイアウトを行うので、並べる要素をグルーピングできるようにしておくと良いですね。

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="column column--left">左側に配置（コンテンツ幅の右端に揃えて）する要素</div>
      <div class="column column--right">右側に配置（コンテンツ幅の左端に揃えて）する要素</div>
    </div>
  </div>
</div>

:root {
  --container-width: 1000px;
  --row-min-height: 400px;
}
.wrapper {
  overflow: hidden;
}
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
}
.row {
  position: relative;
  min-height: var(--row-min-height);
}
.column {
  width: calc(100vw - (100vw - var(--container-width)) / 2);
  max-width: 100vw;
  position: absolute;
}
.column.column--left {
  height: 100%;
  top: 0;
  right: 0;
}
.column.column--right {
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

  CSSでは同じくコンテンツ幅を変数として管理するのに加えて、コンテンツ要素を絶対位置指定で配置させる際に表示領域を決める下限の高さも設定できるようにしておくと便利です。そこからは先ほどと同じ要領でレイアウトを作っていきますが、今回はコンテンツ要素を絶対位置指定で配置させる点が大きな違いです。各要素をコンテンツ幅の左右両端を起点となるように配置します。そうすると、画面幅からコンテンツ幅を引いた残りの幅分だけ画面幅から引いたサイズの幅が必要となるのがわかりますので、これらを算出していき幅を指定します。   絶対位置指定を行なっていますが、コンテンツ幅に合わせて配置場所が決まっているのと、単位にvwを採用しているのでレスポンシブにも強いレイアウトになります。このレイアウトのサンプルはこちらに用意しています。  

---

  今回はブロークングリッドのレイアウトをコーディングするときに使えるCSSのテクニックをまとめてみました。こうしてみるとvwでの幅指定はとても便利ですね。こういったレイアウトはアニメーションとも相性が良いので、動かす時の変化の際にアニメーションを適用したりしてもいいですね。ぜひ参考にしてみてくださいね。