ほんっとにはじめてのHTML5とCSS3：【62-1】Grid Layout の grid-template-rows, grid-template-columns

【62-1】Grid Layout の grid-template-rows, grid-template-columns

最終更新日：2021年09月30日　（初回投稿日：2020年12月17日）

今回から Grid Layout を作ってみよう。

Grid Layout（グリッドレイアウト）は、親要素をグリッド（格子）状に分割してできた「セル」に子要素を割り付けていく CSSのレイアウト方法です。

複数のセルを結合させることもできるし、HTMLソースの記述順じゃなくても自由にレイアウトできたりします。

ウェブページ全体のフォーマットを作るのにも適しています。
デバイスに合わせてレイアウトを変えるのも簡単。
（↓クリックでサンプルファイルが別ウィンドウで開きます）

Grid Layout 用のプロパティは数が多いので、今回から数回に分けて記事にします。
まず今回は、Grid Layout の基本構造と、親要素をグリッド状に分けるところまでやってみよう。

本日のINDEX

グリッドレイアウト関連のプロパティは、下記のように記事を分けます。

【62-1】Grid Layout の grid-template-rows, grid-template-columns　←今日はココ
（ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )
【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ
【62-3】セルやエリアを一括指定する grid-templateショートハンド
【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ
【62-5】アイテム側の位置指定を一括する grid-areaショートハンド
【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ
【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns
【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる
【62-9】Grid Layout での order, position-absolute, z-index, margin
（ちょっとメモ）IE10〜Edge15 では Grid Layout の仕様が違う

参考：
・CSS Grid Layout Module Level 2 | W3C Candidate Recommendation Draft
・CSS グリッドレイアウト | MDN

Grid Layout とは（Flexboxとの違い）

親要素に display: grid と指定すると Gridコンテナと呼ばれるものになり、中の子要素は自動的に全部 Gridアイテム と呼ばれるものになります。
これは Flexbox と似た感じです。（Flexboxは、Flexコンテナと Flexアイテム）

アイテムの配置のされかたは、Flexboxも Grid Layoutもデフォルトは左上から右方向（で行が変わればその繰り返し）ですが、Grid Layoutだと アイテムを縦方向に並べたり、エリアを縦方向にも伸ばしたりできるのが特徴。
W3C仕様ではこれを 2-dimensional layouts（2次元レイアウト）と言ってます。
Flexboxはこれができません。

また Grid Layout は、HTMLソース順から独立して自由にレイアウトできます。

Flexboxは、アイテムを並べる箇所に部分的に使うと便利。
Grid Layout は「ページ全体」のレイアウトに使うと便利。といった使い分けかな。

display: grid で親要素をGridコンテナにする

グリッドにしたい親要素に、displayプロパティで grid または inline-grid を指定します。これでこの要素はGridコンテナになります。

inline-gridは、インラインの特徴を持つグリッド。兄弟要素に対してインラインになります

div {  /*←例としてdivを使っています*/
    display: grid;
    }
div {
    display: inline-grid;
    }

displayプロパティに関しては、こちらをご覧ください。
【17-1】displayプロパティでボックスの表示形式を自由に変えよう

セル・エリア・トラック・ラインの概念

親要素の中にグリッドを作っていく前に、ちょっと用語解説を。

セルとエリア

Grid Layout は親要素をセルに分割して作ります。

エリアはアイテムを配置する部分。
セル1個でもエリアになるし、複数のセルを横方向や縦方向に合体させてエリアにすることもできます。
エリアは長方形だけ。T字や L字型のエリアは作れません。

トラックには row（行）と column（カラム）がある

セルを分割するには、セルの高さと幅を決めなきゃいけません。
セルの
横方向の塊かたまり（行）の高さと、
タテ方向の塊（カラム）の幅
を決めれば、グリッド（格子状）になりますね。
このセルの塊かたまり をトラックといいます。線と線の間のスペースといった概念です。
トラックの高さや幅のことをトラックサイズといいます。

この row（ロウ）と column（カラム）という言葉はしょっちゅう出てきますので縦横どっち方向か、感覚的に覚えておいたほうが便利です。
row = 行 = 横方向のトラック
column = カラム = タテ方向のトラック

ライン

もう1つ、ラインという言葉も使われます。ラインはセルを区切る線。
これには番号がついています。
Gridコンテナの左上端を起点にして、下方向（行数）に1、2、3、4....というラインと、右方向（カラム数）に1、2、3、4....と続くラインがあります。

ラインは「1」から始まることに注目！ライン 0 はありませんので要注意です。
セルが3個あるなら、最後のライン番号は「4」。0から始まってないから3じゃない。

ラインには、ライン番号だけでなく、任意の名前を付けることもできます。
これは後ほどやってみましょう。

トラックサイズを指定してグリッドに分ける

トラックサイズを指定して、グリッドを区切ってみましょう。
タテ方向（rows=行）に区切るには grid-template-rowsプロパティ、
横方向（columns=カラム）に区切るには grid-template-columnsプロパティ を使います。

両方とも指定しなきゃいけないわけじゃなく、どっちか一方でもOK。
書かなかった方は、デフォルト値の「none」になり分割しないだけ。
grid-template-rowsプロパティを書かなければ1行だけで縦方向に分割がないレイアウトになり、grid-template-columnsプロパティを書かなければ1カラムの横方向に分割がないレイアウトになります。

grid-template-rows、grid-template-columns と、最後の rows や columns が複数形になっていることに注目！（複数の行やカラムを指定するから複数形なんでしょうね）
間違えて「grid-template-row」とか「grid-template-column」と書いちゃうと何も起きませんので要注意です。

このあとも、プロパティ名に「row や rows」「column や columns」が出てきます。
Gridコンテナ（親）側に指定するのが「sつき」の複数形、
Gridアイテム（子）側に指定するのが「s無し」の単数形って覚えよう。

grid-template-rowsでタテ方向のトラックサイズを決める

grid-template-rowsプロパティで、タテ方向（行の高さ（トラック））を指定します。
値を半角スペースで区切りながら、行の数だけ書きます。

下の例では2つ行を作り、最初は高さ140px、2番目は 130pxにしています。

div {
    display: grid;
    grid-template-rows: 140px 130px;
    }

ここではサイズを px で指定してますが、他にも％や repeat()関数など、たくさんの種類の値が使えます。これらの「値」については次回の記事でまとめます。

grid-template-columnsで横方向のトラックサイズを決める

grid-template-columnsプロパティで、横方向（カラムの幅）を指定します。
値を半角スペースで区切りながら、カラムの数だけ書きます。

下の例では横方向は3つのカラムを作り、最初と2番目は幅28%に、3つ目は44%にしています。これで、2行×3カラム=セル6個のグリッドになりました。

div {
    display: grid;
    grid-template-rows: 140px 130px;
    grid-template-columns: 28% 28% 44%;
    }

アイテムは左上から順に自動で埋まるのがデフォ

2行×3カラム=セル6個ということで、HTMLでアイテムを6個用意しました。

<div class="container">  <!--containerというクラス名を付けました-->
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

CSSはこちら。先程の Grid Layout の指定はハイライト部分です（5〜7行）
アイテム6個に別々に色を付けておきます（10〜15行）

.container{
	border:1px solid#ccc;
	padding:0;
	margin:.5em 0;
	display: grid;
    grid-template-rows: 140px 130px;
    grid-template-columns: 28% 28% 44%;
	}
.container div{padding:1em;text-align:center}	
.container div:nth-child(1) {background:#fcf}
.container div:nth-child(2) {background:#ffc}
.container div:nth-child(3) {background:#cfc}
.container div:nth-child(4) {background:#eee}
.container div:nth-child(5) {background:#cff}
.container div:nth-child(6) {background:#ffebcd}

6個のアイテムが左上から自動的に流し込まれます。
プレビューはこちら。

この自動で流し込まれるのは、grid-auto-flowプロパティのせい。
このプロパティは指定していませんが、デフォルト値の「row」が効いているんです。
grid-auto-flow: row は、左上から横方向に自動でアイテムを流し込みます。

もちろん、この自動で流し込む方法以外にも、アイテムを好きな位置にレイアウトすることもできるんですが、それはまた後日。
今日のところは、特に何も指定しなくても grid-auto-flowプロパティのデフォルト値「row」が効くので自動的に左上から流し込まれる基本を覚えておこう。

grid-auto-flow: column はタテに自動で流し込む

grid-auto-flowプロパティの値を「column」にすれば左上からタテ方向に自動で流し込まれます。
上のサンプルに grid-auto-flow: column を指定してみました。

CSSはこちら。

.container{
	border:1px solid#ccc;
	width:min-content;
	padding:0;
	margin:.5em 0;
	display: grid;
    grid-template-rows: 140px 130px;
    grid-template-columns: 28% 28% 44%;
    grid-auto-flow: column;
	}

grid-auto-flowプロパティは、もう一つの値「dense」もあります。
これは、エリアを複雑に作った場合、自動で流し込むとアイテムが入らない隙間ができちゃうことがあるのですが、その隙間を埋めるようにアイテムをはめ込む指定です。

この grid-auto-flowプロパティと3つの値（row, column, dense）については、後日、サンプルなども加えて記事にまとめます。

（2021年5月記）
記事ができました。grid-auto-flowプロパティについてはこちらをご覧ください。
【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ

ラインに名前をつけてグリッドに分ける

ラインに任意の名前をつけてトラックサイズと一緒に指定できます。
ライン名を付けたほうが編集しやすい場合に使えます。

[ライン名]（半角スペース）トラックサイズ（半角スペース）[ライン名]
という形が基本です。ライン名の間にどのくらいの距離か挟むカタチ。

ライン名は、半角英数字記号で好きな名前を付けられます。
注意点は、最初の文字が数字やハイフン (-) なのはダメ。
あと、span とか auto とか既存のキーワードと同じのもダメなこと。

div{
    border:1px solid#ccc;
    width:min-content;
    padding:0;
    margin:.5em 0;
    display: grid;
    grid-template-rows: [first top-start] 80px [second] 80px [third] 80px [fourth] 80px [last];
    grid-template-columns: [first a-start] 130px [b-start] 130px [last];
    }

上の例では、下図のようにライン名をつけています。
1本のラインに2つ名前がついているものもありますね。ダブルネームにするには半角で区切ります。（コード7,8行目の [first top-start] や [first a-start]）
また、同じ名前があっても大丈夫。（横方向もタテ方向も最後は [last]）

サンプルのプレビューはこちら。
先程のサンプルとHTMLはほとんど変わっていません（アイテムを2個足しました）

トラックサイズを書かずに、ライン名だけで指定すると、う〜んグリッドにならないね。そりゃそうだ。サイズは必要よね。

  grid-template-rows: [first top-start] [second] [third] [fourth] [last];
  grid-template-columns: [first a-start] [b-start] [last];

名前がところどころ抜けた↓こんな書き方をしても、グリッドに変わりはありません。
とにかくトラックサイズでグリッドを決めるんですね。

    grid-template-rows: 80px 80px [third] 80px [fourth] 80px [last];
    grid-template-columns: [first a-start] 130px [b-start] 130px;

ちなみに、例えばこんなふうに↓ 同じことを繰り返して書くようなグリッドなら、

  grid-template-rows: 80px [line] 80px [line] 80px [line] 80px [line];
  grid-template-columns: 130px [line] 130px [line];

repeat( ) 関数を使って、こんなふうに↓ 短く書くこともできます。
（repeat( ) 関数については次回まとめます）

  grid-template-rows: repeat(4, 80px [line]);
  grid-template-columns: repeat(2, 130px [line]);

ライン名も取っちゃって、最短の書き方はこれ。これでもグリッドは全く同じです。

  grid-template-rows: repeat(4, 80px);
  grid-template-columns: repeat(2, 130px);

grid-template-rows と grid-template-columnsの値

2つのプロパティの値を一覧にしておきます。
それぞれの値の詳細は次回の記事でまとめます。

grid-template-rowsプロパティ grid-template-columnsプロパティ
キーワード	none がデフォルト値。分割しません auto はブラウザにお任せ
<length>	正の数値に単位（px, em, rem など）を付けて指定（マイナスの値不可）
パーセンテージ	親コンテナのサイズに対するパーセンテージ（マイナスの値不可）コンテナのサイズがトラックサイズに依存する場合は auto を使うこと
<flex>	単位「fr」を使ったトラックのフレックス係数を指定（マイナスの値不可）
max-content	内容（エリア内のテキストなど）に合わせて最大値にする
min-content	内容（エリア内のテキストなど）に合わせて最小値にする
fit-content( )	指定値が、内容によって可能な最小サイズ〜最大サイズの間であればそれを使い、それよりはみ出すようなら最小サイズか最大サイズの近い方を使う
minmax(min, max)	サイズの最小値・最大値を決めておき、画面サイズが変わっても、その値以下・以上にならないようにする
repeat( )	サイズ指定の繰り返しパターンをひとまとめにする
subgrid	Grid を入れ子にしたとき、子のグリッドが親のグリッドのトラックを利用できるようにする
ライン名	ライン名を [ ] で囲んで指定できます（前回の記事に詳細）
グローバル値	inherit 親の値を継承 initial 継承した親の値を解消しデフォルト値に戻す unset 値を解除。継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない	適用できる要素	グリッドコンテナ（display:grid か display:inline-grid を指定した要素）

次回予告

Grid Layoutの初回は、グリッドを作ってアイテムを流し込むところまでできました。今後はアイテムの位置を指定する他の方法をやっていきましょう。

が、その前に、
今回の grid-template-rows、grid-template-columns で使える「トラックサイズを指定するための値」について次回まとめます。
（これやらないと今後説明しにくいので事前にやっときます。だから次回はあまり面白くないかもw）

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2021-09-30（Thu）│
投稿日：2020-12-17（Thu）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿