CSS Gridを使ったレスポンシブ対応の基本レイアウト
以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！
2カラム
まずは基本の2カラム。CSS Gridのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！
可変幅 2カラム
カラムを画面の幅に合わせて伸縮させるには、CSSグリッドで使える fr という単位が便利です。親要素に各ブロックの幅を指定する grid-template-columns プロパティーを指定し、2fr 1fr と設定すれば 2:1 の割合でレイアウトが組まれます。半角スペースで区切る点がポイント！
CSS
1 2 3 4 5 | .grid { display: grid; grid-gap: 10px; grid-template-columns: 2fr 1fr;} |
レスポンシブ対応はメディアクエリーを使いましょう。先程 2fr 1fr と指定していたところを 1fr のみに変更すれば1カラムとして表示できます。
CSS
1 2 3 4 5 | @media(max-width: 400px){ .grid { grid-template-columns: 1fr; }} |
可変幅＋最小値指定 固定幅 2カラム
先程のものは2つのブロックともに可変しましたが、ブロックの幅に最小値を指定することもできます。この指定には minmax を使います。minmax の基本的な書き方は minmax(最小値, 最大値) です。
例えば minmax(180px, 1fr) と書くと通常は1frの幅で表示し、最小値が180pxなので、その要素の幅は180pxより小さくなることはありません。下の例ではメインカラムは 2fr 、サイドバーは最小値のある 1fr として表示しています。
CSS
1 2 3 4 5 | .grid { display: grid; grid-gap: 10px; grid-template-columns: 2fr minmax(180px, 1fr);} |
3カラム
3カラムの実装は簡単です。HTMLで3つのブロックを用意したら、あとは grid-template-columns プロパティーで3つ分の幅を指定すればOKです。例えば先程の2カラムの例だと grid-template-columns: 2fr 1fr; としていたところを grid-template-columns: 1fr 3fr 1fr; とすれば 1:3:1 の割合で3カラムとして表示できます。カラム数分、半角スペースで区切るわけですね！
CSS
1 2 3 4 5 | .grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr 3fr 1fr;} |
ここで問題になるのが各ブロックを並べる順番です。コンテンツの重要度はHTMLで上から記述した順になるのが理想なので、メインカラム、サイドバー1、サイドバー2の順に書くことになるでしょう。
そうするとこのように、左から順に並べられます。ではメインカラムを2つのサイドバーで挟みたい時はどうでしょう？HTMLの記述順を書き換えるとコンテンツの重要度に影響しますし、音声ブラウザー等で支障がでることがあります。そこで order プロパティーを指定して視覚的な順番を操作しちゃいましょう！
CSS
1 2 3 4 5 6 7 8 9 | .main { order: 2;}.side { order: 3;}.list { order: 1;} |
モバイル版ではHTML通りメイン、サイドバー1、サイドバー2と並べたい場合は、メディアクエリーを使って order: 0; で順序をリセットすればOK。
CSS
1 2 3 4 5 6 7 | @media ( max-width : 400px ){ .main, .side, .list { order: 0; }} |
マルチカラム ― タイルレイアウト
同じ幅、同じ高さのボックスを繰り返し表示するタイルレイアウト。以前は「Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用」という記事で display: flex; を使って実装する方法を紹介しました。Flexboxでも手軽に実装できますが、CSSグリッドを使えばさらに簡単！メディアクエリーすら使わなくていいのです！
要素を繰り返し並べたい時は repeat() という関数が使えます。例えば grid-template-columns: repeat(4, 200px); を指定すると、200pxのボックスが一列に4つ並ぶことになります。
1 2 3 4 5 | .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 200px);} |
さらに先程の minmax と組み合わせると、一列に4つのボックスが200pxの幅までは可変するようになります。
1 2 3 4 5 | .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(4, minmax(200px, 1fr));} |
レスポンシブにも対応させる場合、一列に4つと限定せず、画面の幅に合わせてボックスを折り返して次の行に表示させていきたいですね。そんな時は繰り返しの数値の部分を auto-fit にしましょう。auto-fit を使えばボックスを折り返しながら親要素の余ったスペースを埋めていきます！
CSS
1 2 3 4 5 | .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));} |
↑デモ画面の右上「Edit on CODEPEN」をクリックして別タブで表示し、画面幅を伸縮させて見てください！
CSSグリッドは複雑なレイアウト向けと思われがちですが、基本のレイアウトも手軽に実装できますね！個人的にはこれまでは margin で余白を作っていたのが、grid-gap になる点が地味に便利で好きです。簡単なレイアウトから試していってくださいね！
