ブロークングリッドレイアウトっぽいグリッドレイアウト #CSS

この記事の概要

プロモーション用のサイトからコーポレートサイトまで、ブロークングリッドレイアウトを採用しているWebサイトをよく見かけます。
イケてる見た目にはなりますが、positionで頑張って配置するのは大変過ぎますよね。（レスポンシブでの挙動まで考えると尚更）

というわけで、比較的手抜きでブロークングリッドレイアウトっぽく見える方法を考えてみました。

display: grid;を使います。
ブロークングリッドという名前のレイアウトを実現するのにCSS gridを使うのもいささか気が引けますが、使います。

そもそも、ブロークングリッドと呼ばれているようなサイトは大半が完全に不揃いなわけではなくまあまあグリッドがあるけど、一部が崩れているに過ぎません。

以下のようなギャラリーを見てみるとよく分かると思います。

基本的にはdisplay: grid;に沿わせつつ、一部の要素だけを外すように作ると省エネで作れます。

見本というほど大それたものではありませんが、今回の記事のために簡単に作ってみました。

リポジトリはこちらです。

具体的なテクニックとして、以下を紹介します。

よくあるグリッドレイアウトでは偶数、とりわけ12カラムのレイアウトがよく使われています。
しかしここであえて奇数を選びました。

好みの問題もあるかもしれませんが、偶数だと画面中央での分割が増える・目立ちがちな気がします。
するとブロークングリッドというよりはスプリットスクリーンっぽさが強く見えるかもしれません。

というわけで奇数にしてみるのをお勧めします。

今回でいうと、以下のようなコードで全体のグリッドを定義しています。

.container {
  display: grid;
  grid-template-columns: repeat(13, minmax(80px, 1fr));
  grid-template-rows: auto;
  width: 100%;
}

maxを1frにしていますが、今のままだと際限なく伸びてしまうので適当な上限を決めても良いかもしれませんね。

ブロークングリッドっぽさを出すのに一番重要なポイントかもしれません。
gridを使うと要素の重ね合わせがpositionより楽（というか、管理がしやすい）と思います。

例えば、以下のように書けば少しずつ重なった要素を再現できます。
グリッドコンテナ側の記述を変えればアイテムも追従して位置やサイズが変わってくれるので、メディアクエリによる気合いの入った分岐も少なくて済むのではないでしょうか。

See the Pen Untitled by Keisuke Watanuki (@xrxoxcxox) on CodePen.

そうは言ってもすべての要素がグリッドの線に沿っていると若干単調になってしまいます。
というわけでスパイス的に変化を加えておきましょう。

例えば中央揃えを施すと、始点や終点が既存のグリッドから外れます。

.text {
  grid-column: 1 / -1;
  text-align: center;
}

見本でいうと、タイトルっぽい部分に中央揃えを施しています。

また、微妙にpaddingをつけて位置をずらすのも良いでしょう。

注意点として、こういった微妙なずらしは多用しないでください。
ある程度グリッドを感じられる中で1つや2つのズレがあるからこそ良い緩急がつくのであって、すべてがずれていたらただの混沌です。

最後のはテクニックというか、ブロークングリッドレイアウトでは大抵使われているのでついでに紹介するだけです。

writing-mode: vertical-lr;などと指定すると、テキストの書かれる向きが変わります。
見本では右下のScrollという文字に使っています。

これも、単調になりすぎるのを防ぐためのスパイスのようなものなので、ページの中に1~2個存在している程度で十分だと思います。

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！