グリッドレイアウト

こんにちは、エムケーワイです。

本日(10月26日)はプロ野球のドラフト会議でした。今年は新型コロナ禍で、高校生も大学生も社会人もアピールの場が少なかったので、指名する選手を絞り切れなかったのかもしれませんが、巨人は支配下7名に加え育成で12名も指名したようです。いくら近年育成に力を入れているとは言え、12名は多過ぎじゃないですかね？球団は芽が出なければ切ればいいですが、指名された方は人生がかかってますからね。高校生や大学生は大学や社会人に進んで、次の機会に支配下での指名を目指す道を選ぶのもありかなと思います。どちらも厳しい道だと思いますが…

さて今回は、私が持っているHTML/CSSの本には載っていないCSSの「グリッドレイアウト」なるものを使ってみようと思います。

目次 [閉じる]

グリッドレイアウトの基礎
基本的な使い方
エリア名を指定する方法
自動レイアウト
まとめ

1. グリッドレイアウトの基礎

グリッドレイアウトは、格子状に並んだマス目(グリッド)の任意の位置に要素を配置することができます。

また、グリッドは縦・横に結合することができ、下図のように大きさの異なる要素を並べて配置することも可能です。

グリッド全体を囲む要素をコンテナと呼び、コンテナの子要素をアイテムと呼びます。

アイテムを配置するグリッドの位置は、グリッドを分割する線(ライン)の番号で指定します。ラインはグリッド全体の上下左右にも存在し、例えば2行 × 3列のグリッドの場合、3本の横ラインと4本の縦ラインが存在します。各ラインには左⇒右および上⇒下に1から番号が割り当てられます。このライン番号を使って、右下のグリッドであれば、行は”grid-row: 2 / 3“、列は”grid-column: 3 / 4“と指定します。

2. 基本的な使い方

3行 × 3列のグリッドに1 × 1のアイテムを2個、2 × 2のアイテムを1個、3 × 1のアイテムを1個下図のように配置します。

< HTMLコード >

<div class="mkyGridContainer1">
    <div id="mkyGridItem1_1">Item 1</div>
    <div id="mkyGridItem1_2">Item 2</div>
    <div id="mkyGridItem1_3">Item 3</div>
    <div id="mkyGridItem1_4">Item 4</div>
</div>

< CSS設定 >

.mkyGridContainer1 {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 1fr;
}

#mkyGridItem1_1 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    background-color: white;
}

#mkyGridItem1_2 {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    background-color: lightblue;
}

#mkyGridItem1_3 {
    grid-row: 2 / 4;
    grid-column: 1 / 3;
    background-color: lightpink;
}

#mkyGridItem1_4 {
    grid-row: 1 / 4;
    grid-column: 3 / 4;
    background-color: greenyellow;
}

コンテナ(クラス”mkyGridContainer1″を持つdiv要素)に対しグリッドレイアウトのための設定を行います。まず”display: grid“とすることで、グリッドレイアウトであることを宣言します。次の”grid-template-rows“でグリッドの各行の高さを指定します。今回は高さ100pxの行が3行です。最後に”grid-template-columns“でグリッドの各列の幅を指定します。今回は1列目および2列目が100pxで、3列目は”1fr“となっていますが、これはコンテナの幅から前2列の幅の合計を除いた幅を意味します。”1fr”は最後の列以外にも使用できます。また複数個使用することもでき、先頭の数値は残りの幅に対する比率を示します。
各アイテム(ID”mkyGridItem1_X”を持つdiv要素)に対しては、配置されるグリッド位置を1.で記述した方法で指定しています。

< 結果 >

Item 1

Item 2

Item 3

Item 4

3. エリア名で指定する方法

2.と同じレイアウトを別の設定方法で実現します。コンテナ側で各グリッドに名前(エリア名)をつけて、アイテム側でエリア名を指定する方法です。

「グリッド名」でも良さそうですが、コンテナ側では”grid-template-areas“を、アイテム側では”grid-area“を使用するので「エリア名」とします。

< HTMLコード >

HTMLコードの構成は1.と同じです(クラス、IDの末尾の番号が異なるのみ)。

<div class="mkyGridContainer2">
    <div id="mkyGridItem2_1">Item 1</div>
    <div id="mkyGridItem2_2">Item 2</div>
    <div id="mkyGridItem2_3">Item 3</div>
    <div id="mkyGridItem2_4">Item 4</div>
</div>

< CSS設定 >

.mkyGridContainer2 {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 1fr;
    grid-template-areas:
        "area1 area2 area4"
        "area3 area3 area4"
        "area3 area3 area4";
}

#mkyGridItem2_1 {
    grid-area: area1;
    background-color: white;
}

#mkyGridItem2_2 {
    grid-area: area2;
    background-color: lightblue;
}

#mkyGridItem2_3 {
    grid-area: area3;
    background-color: lightpink;
}

#mkyGridItem2_4 {
    grid-area: area4;
    background-color: greenyellow;
}

コンテナ(クラス”mkyGridContainer2″を持つdiv要素)に対しては、”grid-template-areas“でエリア名を定義する設定を追加しています。今回は3行 × 3列なので、1行毎に3個のエリア名を定義し、その文字列をダブルクオーテーション(“)で囲みます。エリア名は半角スペースで区切ります。ここでは”areaX”というエリア名にしていますが、任意のエリア名をつけることができます。また、複数のグリッドに同じエリア名をつけることで、グリッドを結合することができます。
各アイテム(ID”mkyGridItem2_X”を持つdiv要素)に対しては、”grid-row”、”grid-column”の代わりに”grid-area“でエリア名を設定しています。

“grid-template-areas”の設定により、アイテムがどのように配置されるかが認識しやすくなり、アイテム側でもエリア名を指定するだけなので、直感的に設定でき、2.よりも設定ミスが少なくなるのではないでしょうか。

< 結果 >

Item 1

Item 2

Item 3

Item 4

4. 自動レイアウト

グリッドレイアウトでは、アイテムの位置を指定せず自動でレイアウトさせることも可能です。その際、アイテムをまず行方向、列方向のどちらに配置するかを指定することもできます。また、アイテムを配置する順番を指定することもできます。

ここでは、HTMLコードで最後のアイテムから逆順に自動レイアウトさせてみます。ウィンドウの幅を変更すると、グリッドの列数が変動します。

< HTMLコード >

HTMLコードの基本構成は1.および2.と同じです。アイテムの数を9個に増やしています。

<div class="mkyGridContainer3">
    <div id="mkyGridItem3_1">Item 1</div>
    <div id="mkyGridItem3_2">Item 2</div>
    <div id="mkyGridItem3_3">Item 3</div>
    <div id="mkyGridItem3_4">Item 4</div>
    <div id="mkyGridItem3_5">Item 5</div>
    <div id="mkyGridItem3_6">Item 6</div>
    <div id="mkyGridItem3_7">Item 7</div>
    <div id="mkyGridItem3_8">Item 8</div>
    <div id="mkyGridItem3_9">Item 9</div>
</div>

< CSS設定 >

.mkyGridContainer3 {
    display: grid;
    grid-auto-rows: 100px;
    grid-template-columns: repeat(auto-fill, 100px);
}

#mkyGridItem3_1 {
    order: 9;
    background-color: white;
}

#mkyGridItem3_2 {
    order: 8;
    background-color: lightblue;
}

#mkyGridItem3_3 {
    order: 7;
    background-color: lightpink;
}

#mkyGridItem3_4 {
    order: 6;
    background-color: greenyellow;
}

#mkyGridItem3_5 {
    order: 5;
    background-color: cyan;
}

#mkyGridItem3_6 {
    order: 4;
    background-color: magenta;
}

#mkyGridItem3_7 {
    order: 3;
    background-color: yellow;
}

#mkyGridItem3_8 {
    order: 2;
    background-color: plum;
}

#mkyGridItem3_9 {
    order: 1;
    background-color: orange;
}

コンテナ(クラス”mkyGridContainer3″を持つdiv要素)に対しては、”grid-auto-rows: 100px“で行の高さを100pxとしています。また、”grid-template-columns”を”repeat(auto-fill, 100px)”とすることで、コンテナの幅に合わせて幅100pxのアイテムが自動で並べられます。配置しきれなかったアイテムは次の行に配置されます。
アイテム(ID”mkyGridItem3_X”を持つdiv要素)に対しては、位置の指定は行わず、”order”で並び順を設定しています。ここでは、HTMLコードでの記述順と逆順になるよう設定しています。

< 結果 >

ウィンドウの幅を変えると配置が変わりますので、是非確認してみてください。

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

5. まとめ

アイテムの位置を①ライン番号で指定する方法、②エリア名で指定する方法、③自動レイアウトの3通りの方法でグリッドレイアウトを使ってみました。

グリッドレイアウトに慣れていないせいもあると思いますが、①の方法はライン番号を間違えたり、行と列を間違えたりしました^_^;

その点②の方法は、エリア名をつけるのが面倒ですが、それさえやってしまえば、アイテムの位置指定は直感的で①と比較して容易だと感じました。

③の方法はアイテムの位置を指定しなくても自動でレイアウトしてくれます。レスポンシブ対応する際に使えそうです。

今回は極簡単な構成で使ってみましたが、機会があればもっと複雑な構成のページへの適用を考えてみたいと思います。

最後までお読みいただきありがとうございました。

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30