BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

【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:配置したいエリア」と書くことで、作成したエリアに配置することができます。

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

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

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

デモを見る

ソースの表示