CSS Gridレイアウトでコードをシンプルに
Webサイトのレイアウト作成時、多くの場面でflexレイアウト（display: flex;）が活用されています。しかし、要素をきれいに整列させるために、擬似要素（:before / :after）で調整するなど、コードが複雑になることもありますよね。
そんな時、CSS Gridレイアウト（display: grid;）を使うと、より直感的でシンプルな記述でレイアウトを組める可能性があります。
今回は、実際のWebサイト（サイコムの映像教材一覧ページ）で使用されているflexレイアウトのコードを、gridレイアウトに置き換える例をご紹介します。
flexとgridのコード比較
まずは、現在のレイアウトで使用されているflexのコードを見てみましょう。
flexレイアウトの例
このレイアウトでは、以下の指定を行っています。
ulをflexで横並び、折り返し、両端揃え（justify-content: space-between;）にするliに縦方向のマージン（margin-bottom）をつける- パネルの数が中途半端な場合（例：4列で7個目）も左寄せを維持するため、擬似要素で調整している
▼flexレイアウト
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&:before,&:after {
display: block;
width: 23.5%;
content: "";
}
&:before {
order: 1;
}
}
li {
margin-bottom: 40px;
}gridレイアウトへの置き換え
同じレイアウトをgridレイアウトで組むと、コードは以下のようになります。
▼gridレイアウト
ul {
display: grid;
/* 横幅235pxの子要素liを4つ横に並べ続ける */
grid-template-columns: repeat(4 , 235px);
/* 上下の空き 40px / 左右の空き 20px の指定 */
grid-gap: 40px 20px;
}flexレイアウトで必要だった擬似要素による調整が不要になり、ul（親要素）の指定だけでレイアウトが完結しているのが分かります。
gridレイアウトのメリット
flexと比較した場合、今回のケースにおけるgridのメリットは以下の通りです。
- 記述量が少ない: 擬似要素などの回りくどい指定が不要になり、コードがスッキリします。
- 可読性の向上:
grid-template-columnsで「何列にするか」、grid-gapで「隙間はどれくらいか」が明示的に指定されるため、レイアウトの意図が分かりやすくなります。 - 修正が容易: レイアウトの指定が親要素（
ul）に集約されているため、メンテナンス時も修正箇所が少なく済みます。
レスポンシブ対応も簡単
gridレイアウトは、レスポンシブ対応もシンプルに記述できます。メディアクエリを使い、画面幅に応じて列の数を変更するだけです。
@media only screen and (max-width: 640px) {
ul {
/* 横幅48%の子要素liを2つ横に並べ続ける */
grid-template-columns: repeat(2 , 48%);
/* 左右の空き 4% の指定 */
grid-column-gap: 4%;
}
}使用上の注意点：gapプロパティのブラウザ対応
コード例で使用したgrid-gapは、現在gapプロパティとして仕様が統一されています。gridだけでなくflexレイアウトでも使用できる便利なプロパティです。
ただし、IE11ではgapプロパティがサポートされていません。（grid-gapやgrid-column-gapは限定的にサポートされています）
古いWebサイト（特にIE11対応が必須）でgapプロパティを使用する場合は、Autoprefixer（ベンダープレフィックスを自動付与するツール）を設定するなど、クロスブラウザ対応に注意してください。
各プロパティの詳しい対応状況は、Caniuseで確認することをおすすめします。
まとめ
今回の例のような、グリッド状に要素を並べる単純なレイアウトであれば、flexよりもgridレイアウトの方がはるかに楽に、そして直感的に実装できることが分かりました。
ただし、gridは二次元（縦横）のレイアウト、flexは一次元（縦か横か一方向）のレイアウトを得意としており、それぞれに強みがあります。
デザインの意図を読み取りながら、両者を適切に使い分けていくことが、効率的で美しいWebサイト制作につながります。ぜひ皆さんの環境でも試してみてください。
よくある質問（FAQ）
- Q1: `flex`と`grid`は、どう使い分ければ良いですか？
- A1: 大まかな基準として、`grid`はページ全体の大きなレイアウト（二次元）、`flex`はコンポーネント内の要素の整列（一次元）に向いています。例えば、ヘッダー、サイドバー、メインコンテンツといった大枠を`grid`で作り、その中のナビゲーションメニューやボタンの並びを`flex`で整える、といった使い分けが一般的です。
- Q2: `grid`レイアウトは、古いブラウザでも使えますか？
- A2: ほとんどのモダンブラウザ（Chrome, Firefox, Safari, Edge）では問題なく使用できます。ただし、本文でも触れた通り、Internet Explorer 11 (IE11)では対応が不十分です。
gapプロパティが使えないなど多くの制約があるため、IE11対応が必須の案件では、使用を避けるか、Autoprefixerなどで慎重に対応する必要があります。 - Q3: `grid-gap`以外に、`grid`の便利なプロパティはありますか？
- A3: たくさんありますが、特に便利なものを2つ紹介します。1つは
fr単位（フラクション）です。これは「利用可能なスペースの割合」を指定できる単位で、grid-template-columns: 1fr 2fr;とすれば、スペースを1:2の比率で分割できます。もう1つはgrid-template-areasで、レイアウトをアスキーアートのように視覚的に定義でき、複雑なレイアウトも管理しやすくなります。
