BLOG

【Gridは便利?】CSS Grid Layout(Grid)を使った実践的なコーディングサンプル3選!

2021/11/16

【Gridは便利?】CSS Grid Layout(Grid)を使った実践的なコーディングサンプル3選!
みなさんは実案件でGridを導入していますか?

GridはIE以外の主要ブラウザでサポートされています。
そのため、IE対応をしなければならない案件ではなかなか導入ができないのが実情です。。。
Gridのサポート状況

しかし、マイクロソフトから正式に、「Internet Explorer 11 デスクトップアプリは 2022 年 6 月 15 日にサポート終了」とお知らせがありました!

そのため今後は、今まで使うことができなかったGridを含むモダンなCSSプロパティを使う機会が増えてくるのではないかと思います。
(※サポートが終了するからといってIE対応が終了するわけではないのですが…)

そこで今回は、Gridを使用した実践的なコーディングサンプルを3つご紹介しようと思います!

※Gridの基礎的な使い方については解説していませんので、基礎が気になる方はご自身でお調べください

カード型レイアウト

まずはとてもコーディング頻度の高いカード型レイアウトです。
カード型レイアウト

デモを見る

ソースの表示

ポイント解説

このコーディングのポイントは以下の部分です(重要な部分のみ抜粋)

Gridを使うと、子要素のレイアウトを親要素で制御できる点がポイントです。

親要素の.card-grid__containerに対して、★1を宣言し、子要素のレイアウトを★3で制御しています。

★2もポイントで、このように指定すると子要素間の余白が20pxになります。

marginと何が違うの?
と思ったかもしれません。

marginの場合、marginを打ち消すという作業が発生します。
例えば今回のサンプルの場合、nth-child:3n+1の要素に対してmargin-left:0 の記述が必要です。

しかし、gapを使うとその打ち消しが不要になります!

ちなみに、gapプロパティはFlexboxでも同様に使えます!(※もちろんIE以外)

キーワード
・grid
・gap
・grid-template-columns
・minmax

Gallery(ギャラリー)型レイアウト

続いて、少し複雑なギャラリー型レイアウトです。
Gallery(ギャラリー)型レイアウト
デモを見る

ソースの表示

ポイント解説

このサンプルのコーディングポイントは以下の部分です(重要な部分のみ抜粋)

サンプル1つめと同様で、親要素のl-galleryに対して★1を宣言します。
次に、★2がポイントです。

★2のようにgrid-templateを使うと、子要素を配置するためのエリアを作ることができます。
以下のようなイメージですね!

Gallery(ギャラリー)型レイアウト

最後に、★3以降の記述で、子要素をどこに配置するか指定します。
「grid-area:配置したいエリア」と書くことで、作成したエリアに配置することができます。

インナー幅からはみ出したレイアウト

最後は、インナー幅から要素がはみ出たデザインです。

インナー幅からはみ出したレイアウト

デモを見る

ソースの表示

ポイント解説

このサンプルのコーディングポイントは以下の部分です(重要な部分のみ抜粋)

まず、親要素に★1を宣言します
次に★2を宣言し、3カラムレイアウトを作成します。
インナー幅からはみ出したレイアウト

次に、★3の記述をし、子要素全てを番号2~3のカラムに配置します

インナー幅からはみ出したレイアウト

Gridを使うと、以下のように列と行に対して番号が振られるのでそれを利用しています
インナー幅からはみ出したレイアウト

最後に、★4の記述をし、1~4のカラム全体に配置することで、インナー幅をはみ出したレイアウトの完成です!

ちなみに、Gridを使用しない場合は以下の記事で紹介されている方法で実装が可能です!
子要素を親要素(インナー幅)からはみ出して画面いっぱいにするCSS

まとめ

以上、Gridを使った実践的なコーディングサンプルを3つご紹介しました。

一番最後のサンプル以外はFlexを使うと同じようにコーディングできますが、Flexを使うと記述量がさらに多くなってしまう点がデメリットです。
できればソースはシンプルに・見やすくしたいのでGridを使えるのであれば積極的に使うといいでしょう!

来る2022年6月以降に向けてGrid以外のモダンなCSSプロパティはキャッチアップしていきたいですね!
では!

▼参考記事
Webページでよく使用されるレイアウトに役立つCSS Gridの実装テクニックのまとめ
FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ