CSS Grid Layout（グリッドレイアウト）を使ってみた（サンプルつき）

2022年6月16日、ついにInternet Explorer（IE）のサポートが終了となり、（私の中では）切るに切れなかった対応ブラウザから堂々と外すことができるようになりました。  その影響でなんとなくIEでも崩れないようなCSSを今まで使っていました。

  IEがなくなることで使えるCSSを眺めていたところ、だいぶ前にこれ使えたら便利そうだなと思っていたgridがあったので今回はgridのことを調べました。

  IE11だとflexは概ね動いたのでflexを最近覚えたばかりな気がしますが。（IE11でもgridは使えたようですが、記述方法と挙動が面倒そうだったので使用していませんでした。）

今回は調べたgridに関するプロパティで使用頻度が高そうなものをサンプルと一緒にご紹介します。  大雑把な説明なので、各プロパティの詳細に関しては以下でご確認ください

グリッドレイアウトの基本概念 – CSS: カスケーディングスタイルシート | MDN

共通サンプルHTMLコード

<div class="wrapper">
    <div class="box1">サンプルテキスト1 </div>
    <div class="box2">サンプルテキスト2 </div>
    <div class="box3">サンプルテキスト3 <br>サンプルテキスト <br>サンプルテキスト <br>サンプルテキスト <br>サンプルテキスト </div>
    <div class="box4">サンプルテキスト4 </div>
    <div class="box5">サンプルテキスト5 </div>
    <div class="box6">サンプルテキスト6 </div>
    <div class="box7">サンプルテキスト7 </div>
</div>

display: grid;

gridのエリアを定義します。
この指定だけでは何も起こりません。

サンプルページ

grid-template-rows

グリッドの縦の高さを指定します。記述した数の行の高さが指定できます。

記述例

grid-template-rows: 100px 200px;
grid-template-rows: repeat(2,minmax(100px,auto));

サンプルページ

grid-template-rows – CSS: カスケーディングスタイルシート | MDN

grid-template-column

グリッドの列の幅を指定します。記述した数の列の幅が指定できます。

記述例

grid-template-columns: 300px 400px 100px;

サンプルページ

grid-template-columns – CSS: カスケーディングスタイルシート | MDN

grid-template-rowsとgrid-template-columnsはあわせて記述することも可能です。

記述例

grid-template: 100px 200px / 300px 400px;

grid-template-areas

各グリッドに名前をつけます。

この記述だけではなにも起こらず、grid-row-start等で使用することができます。

記述例 

grid-template-areas:
                "a a a"
                "b c c"
                "b c c";

grid-template-areas – CSS: カスケーディングスタイルシート | MDN

grid-auto-flow

各アイテムの配置方向を指定します。

記述例

grid-auto-flow: row;

サンプルページ

grid-auto-flow – CSS: カスケーディングスタイルシート | MDN

grid-auto-rows

grid-template-rowsの範囲外に配置されたアイテムの縦方向のサイズを指定します。

記述例

grid-auto-rows: 10px;

サンプルページ

grid-template-rows – CSS: カスケーディングスタイルシート | MDN

grid-auto-columns

grid-template-columnsの範囲外に配置されたアイテムの横方向のサイズを指定します。

記述例

grid-auto-columns: 30px;

サンプルページ

grid-auto-columns – CSS: カスケーディングスタイルシート | MDN

grid-row-gap/grid-column-gap/grid-gap

グリッド行の間隔・列の間隔を指定します。

記述例

grid-row-gap: 3px;

   サンプルページ

row-gap (grid-row-gap) – CSS: カスケーディングスタイルシート | MDN

grid-column-gap: 5px;

サンプルページ

column-gap (grid-column-gap) – CSS: カスケーディングスタイルシート | MDN

grid-row-gapとgrid-column-gapを一気に指定する場合はgrid-gapを使用します。

grid-gap: 3px 5px;

gap (grid-gap) – CSS: カスケーディングスタイルシート | MDN

justify-content

グリッドの横方向の位置を指定します。

記述例

justify-content: center;

サンプルページ

justify-content – CSS: カスケーディングスタイルシート | MDN

align-content

グリッドの縦方向の位置を指定します。

align-content: center;

サンプルページ

align-content – CSS: カスケーディングスタイルシート | MDN

justify-items

全てのアイテムの横方向の位置を指定します。

justify-items: center;

サンプルページ

justify-items – CSS: カスケーディングスタイルシート | MDN

align-items

全てのアイテムの縦方向の位置を指定します。

align-items: center;

サンプルページ

align-items – CSS: カスケーディングスタイルシート | MDN

grid-row-start/grid-row-end/grid-row

グリッド行内のグリッドアイテムの縦方向の先頭位置と最後の位置を指定します。 

grid-row-start: 1;
grid-row-end: 2;

サンプルページ

grid-row-start – CSS: カスケーディングスタイルシート | MDN 

grid-row-end – CSS: カスケーディングスタイルシート | MDN

grid-row-startとgrid-row-endを一括で指定する場合はこちらを使用します。

grid-row: 1 / 2;

grid-row – CSS: カスケーディングスタイルシート | MDN

grid-column-start/grid-column-end/grid-column

グリッド行内のグリッドアイテムの横方向の先頭位置と最後の位置を指定します。 

grid-column-start: 3;
grid-column-end: 4;

grid-column-start – CSS: カスケーディングスタイルシート | MDN

grid-column-end – CSS: カスケーディングスタイルシート | MDN

grid-column-startとgrid-column-endを一括指定する場合にはこちらを使用します。

grid-column: 3 / 4;

grid-column – CSS: カスケーディングスタイルシート | MDN

justify-self

配置コンテナ内での横位置を指定します。

justify-self: center;

サンプルページ

justify-self – CSS: カスケーディングスタイルシート | MDN

align-self

配置コンテナ内での縦位置を指定します。

align-self: center;

サンプルページ

align-self – CSS: カスケーディングスタイルシート | MDN

order

順序を指定します。グリッドの順番を入れ替えることが出来るので便利そうです。

order: 1;

サンプルページ

order – CSS: カスケーディングスタイルシート | MDN

  カラムのレイアウトは「table」「float」「flex」「grid」と時代が進んでいますが（私基準）、これからももっと便利なのCSSが増えるのでしょうか。楽しみです。