ほんっとにはじめての HTML5 と CSS3

前回やった grid-template-rowsと grid-template-columnsプロパティは、Grid Layout（グリッドレイアウト）のトラックサイズを決めるものでしたね。
その指定のときに使う値あたいを知っておく必要があるので今回の記事にまとめました。

これらの値は Grid Layout だけでなく他の要素のサイズ指定に使えるものもあります。

1. トラックサイズを指定するための値
   1. <length> や パーセンテージ
   2. 単位「fr」を使った柔軟なサイズ指定
   3. max-content
   4. min-content
   5. fit-content( )
   6. repeat( )
      1. repeat( ) の auto-fill と auto-fit
   7. minmax(min, max)
   8. auto
      1. auto の align-content, justify-contentプロパティとの関係
   9. subgrid

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

【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 1 : 7.2. Explicit Track Sizing | W3C Candidate Recommendation Draft
・CSS Intrinsic & Extrinsic Sizing Module Level 3 | W3C Working Draft
・グリッドレイアウトの基本概念 - CSS | MDN
・CSS の基本データ型 | MDN
・align-content - CSS | MDN

トラックサイズを指定するための値

前回と同じですが grid-template-rowsプロパティと grid-template-columnsプロパティ の値を一覧にしておきます。

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

値のなかに見慣れないもの（max-content とか min-content とか）がありますね。
とにかく1つずつ見ていきましょう↓

<length> や パーセンテージ

<length>は、CSS構文の「データ型」と言われるものの1つで、直訳すると「長さ」ですが、まあ要するに px や em などの単位を付けた数値のことです。
数値「0」なら単位は省略できます。
Grid Layout の場合はマイナスの値は使えません。

CSSのデータ型で他に <integer>（正負の整数）、<number>（整数または小数部分のある数値）などもあります。<length>は、<number>に単位を付けて長さを表すもの。ただし Grid Layout のようにマイナスの値を使えないプロパティもあります（marginプロパティは使えるよ）

パーセンテージは、CSSのデータ型は<percentage>で、親のサイズに対するパーセンテージです。<number>に「%」を付けて書きます。
これも Grid Layout の場合はマイナスの値は使えません。

どっちも要素の幅や高さ、フォントサイズなどにも使います。

<length> <percentage> サンプル

4つのアイテムを 2行・2カラムのグリッドにします。

<div class="sample"> <!--このページのサンプルはだいたい全部これ-->
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.sample{
	border:1px solid#ccc;
	padding:0;
	margin:.5em 0;
	display: grid;
    grid-template-rows: 3em 50px;
    grid-template-columns: 20% 80%;
    }
.sample div{padding:1em;line-height:1;text-align:center}	
.sample div:nth-child(1) {background:#fcf}
.sample div:nth-child(2) {background:#ffc}
.sample div:nth-child(3) {background:#cfc}
.sample div:nth-child(4) {background:#cff}

行(row)は 3em と 50px に、カラムはコンテナに対して 20% 80% の割合になります。

単位「fr」を使った柔軟なサイズ指定

CSSのデータ型では<flex>。これは<number>に単位「fr」を付けて書きます。
1fr とか 2.5fr といったかんじです。
これは Grid Layout だけで使う値です。マイナスの値は使えません。

<flex>は、Gridコンテナ内の使えるスペースを数値の割合で指定できます。

「1fr」なら使えるスペース全部、「1fr 2fr 2fr」なら使えるスペースを1：2：2の割合で指定。複数の値を指定する場合は「半角スペース」で区切ります。

他の値と合わせて「100px 1fr」などと書くこともできます。これなら最初は100pxで次は残り全部って意味。

ウィンドウサイズを変えたり、異なる画面サイズの端末で見たときのために、柔軟にレイアウトしたいときに使うと便利です。

<flex> サンプル

例えば下記のように指定すると、

.sample{
  display: grid;
  grid-template-rows: 50px 3em;
  grid-template-columns: 1.3fr 0.1fr;
  }

カラム幅は 1.3：0.1 の割合でグリッドになります。
（13fr 1fr と書いても同じですけどね。小数点も使えるというサンプルです）

下記のように指定すると、

.sample{
  display: grid;
  grid-template-rows: 3em;
  grid-template-columns: 50px 1fr 2fr 50px;
	}

最初と最後のカラム幅は50px、残りのスペースを1：2の割合で分けます。

スペースを均等に分割したいときは、このように割りたい数だけ1frを書くと、

.sample{
  display: grid;
  grid-template-rows: 3em;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  }

簡単に均等割にしてくれます。

上の 1fr 1fr 1fr 1fr; という書き方は、 repeat(4, 1fr); と書くこともできます。
repeat( )関数については、このページの中ほどで説明しています。

max-content

キーワードmax-content は CSSの Intrinsic Size（内在サイズ）と呼ばれるものの1つ。「その内容に基づくサイズ」的なもの。

maxというと最大値なんですが、最大値というより「その内容そのもの」のサイズ。
例えば中身がテキストの場合、テキスト量が増えて親要素よりはみ出しても（オーバーフロー）、自動折り返しせずにそのまま限りなくはみ出しっぱなしにします。

max-content サンプル

例えば下記のように Gridの最初のエリアAに max-contentを指定すると、

.sample{
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: max-content 1fr 1fr 1fr;
  }

エリアAの内容（テキスト）に合わせてそのトラックが広がり、残り3つのトラックを3分割にしています。

これは、PCなどの大きな画面の場合は autoを指定したのと同じように見えます。

.sample{
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: auto 1fr 1fr 1fr;
  }

ただし、幅が狭い場合だと、autoを指定した場合は領域からはみ出すことがありません。
max-contentは内容（テキスト）を折り返さないので領域からはみ出します。
下のサンプルは、幅300px の <div>の中に上記のサンプルを入れてみたものです。

max-contentを指定した方は、テキストを押し返さないので、残り3つのBCDは最小サイズになってますが結局はみ出ています。
autoを指定した方は、領域内に収めるために BCDを最小サイズにして、Aはテキストを折り返して収めていますね。

auto は align-content、justify-contentプロパティの影響を受けるという特徴もあります。 （→詳しくは auto をご覧ください）

min-content

キーワードmin-content も CSSの Intrinsic Size（内在サイズ =内容に基づくサイズ）と呼ばれるものの1つです。

min-contentはその名のとおり、中身の最小サイズに合わせます。
テキストなら、分割できる単語の中で一番文字数が多いものに合わせます。
画像がエリアより小さければそのサイズに合わせます。

min-content サンプル

最初のカラムに min-content、2番目に max-contentを指定しました。

.sample{
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: min-content max-content 1fr 1fr;
  }

最初のカラムは分割できる単語の一番文字数が多いやつ（fantastic.）のサイズになっています。これが最小のサイズなんですね。

これが日本語だとさあ、最小が1文字なので、縦書き風になっちゃうんだよね。

画像を入れてみた例。min-content も max-content も画像ぴったりサイズ。

ちなみに、コンテナ（親要素）の widthプロパティに min-content を指定してみます。
（今までのサンプルは widthは未指定 = width: auto ←親要素の内寸にピッタリ）

.sample{
  width:min-content;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: min-content max-content 1fr 1fr;
  }

中のアイテム達が最小サイズにされました。（CとDは1文字だから、そこにpaddingを加えたのが最小サイズ） そこに親div要素の囲み罫がピタッとくっついてますね。

fit-content( )

fit-content( ) 関数は、min-content と max-content を使って値を計算します。
（ですのでこれも Intrinsic Size（内在サイズ）と考えていいのかも）

fit-content( ) の ( ) 内に <percentage>か<length> を1つだけを入れます。
パーセンテージか単位を付けた数値です。fit-content(100px) とか fit-content(50%) といったかんじです。

その ( ) 内の値が、
・min-content から max-content の間で使える値ならそのまま使い、
・min-content より小さければ min-contentを、
・max-content より大きければ max-content を使います。

fit-content( ) サンプル

最初のアイテムに5文字「あいうえお」と入れ、そのカラムは fit-content(0) と指定しました。

.sample{
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: fit-content(0) 1fr 1fr 1fr;
  }

日本語テキストの最小値（min-content）は1文字分ですので、0は min-content より小さかったので min-content のサイズを使いました。

fit-content(20em) と指定してみました。

.sample{
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: fit-content(20em) 1fr 1fr 1fr;
  }

max-content は7文字分（テキスト5文字と paddingが左右 1emずつ）で、20emだとそれを超えるので max-content で収まっています。（20emにはしない）

最初と2番目のカラムに fit-content(40%) を指定。
最初のアイテムは短めの、2番目のアイテムには少し長めの文章を入れてみました。

.sample{
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: fit-content(40%) fit-content(40%) 1fr 1fr;
  }

最初のアイテムは max-content で収まって、2番目のアイテムは指定値40%が効いていますね。40%が min-content と max-content の間だったから。

というわけで fit-content( ) は、ウィンドウサイズを大きくする可能性があるサイトで、ある程度はウィンドウサイズに追随するけど、あるサイズ以上にはしたくないときに使うと良さそうです。

repeat( )

repeat( ) 関数は、Grid Layout のトラックサイズ指定だけで使えます。

同じパターンを繰り返す（リピートする）ときに、短縮して書けるので便利です。
「繰り返す回数」と「サイズ」を「 ,（カンマ）」で区切って書きます。

以下の指定は 1行目と2行目は同じ指定。2行目で repeat( )を使って短縮しています。

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

[ライン名] も使えます。（ [ライン名] については前回の記事をご覧ください）

grid-template-rows: 80px [line] 80px [line] 80px [line];
grid-template-rows: repeat(3, 80px [line]);

grid-template-rows: 80px [a1] 80px [b2] 80px [c3];
grid-template-rows: repeat(3, 80px [a1 b2 c3] );

repeat( ) での「繰り返す回数」には、正の整数のほか以下の2つのキーワードが用意されています。
・auto-fill（repeat( )だけで使えるキーワード）
・auto-fit（repeat( )だけで使えるキーワード）

repeat( ) のトラックサイズ値で使えるのは以下のものです。
・<length>
・<percentage>
・<flex> 単位「fr」を使った値
・max-content
・min-content
・auto

repeat( ) の auto-fill と auto-fit

auto-fillは、その名のとおり、コンテナ内を指定されたトラックサイズで満たす（fill）回数を繰り返します。
ウィンドウサイズが大きくなって、配置するアイテムが無くなっても、コンテナ内に中身が空のセルを作り続けます。

auto-fitは、コンテナ内にフィット（fit）させる回数だけ繰り返します。
ウィンドウサイズが大きくなって、配置するアイテムが無くなれば、空のセルを必要以上作りません。

repeat( ) の auto-fill と auto-fit のサンプル

auto-fill と auto-fit を使ったサンプルを別ファイルで作りました。
PCのかたは、ウィンドウサイズを変えて見てください。
（↓クリックでサンプルファイルが別ウィンドウで開きます）

ウィンドウサイズが大きくなると、auto-fillのほうは空のセルができるので右側が空いていますが、auto-fitはあるだけのアイテムをコンテナにピッタリフィットさせます。

サンプルファイルの HTMLとCSSはこちら（要点のみ）

<div class="container"> <!--2つとも同じHTMLです-->
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

.container{  /*上のコンテナ*/
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
.container2{ /*下のコンテナ*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  /*minmax( ) については、すぐ下で説明しています↓*/

minmax(min, max)

minmax(min, max) 関数は、 min 以上、max 以下の範囲を指定できます。
これも Grid Layout だけで使う値です。

( ) 内の min,max は、
「これ以上小さくしたくないサイズ」（=min）と
「これ以上大きくしたくないサイズ」（=max）を
「 ,（カンマ）」で区切って書きます。

ですので、ウィンドウサイズを変えたり、異なる画面サイズの端末で見たときのために、柔軟にレイアウトしたいときに使うと便利です。

min と max の値で使えるのは以下のものです。
・<length>
・<percentage>
・<flex> 単位「fr」を使った値
・max-content
・min-content
・auto

minmax(min, max) サンプル

すぐ前の repeat( ) のサンプルファイルでも minmax(min, max) を使っています。
これは、カラム幅を 100pxより小さくせず、最大は 1fr（使えるスペースの均等割）より大きくしないという指定です。

.container{  /*上のコンテナ*/
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
.container2{ /*下のコンテナ*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

別のサンプルも作ってみます。
grid-template-rows に minmax (min, max) を使って、最小値を 3em、最大値を auto にしてみました。

.sample{
  display: grid;
  grid-template-rows: repeat(2, minmax(3em, auto));
  grid-template-columns: 1fr 1fr;
  }

1行目はテキストの量に従った高さですが、2行目は最小値の 3em になっていますね。

最初のエリアAは、1文字しか入っていませんが、隣のBの高さに準拠しています。これは tableとかと一緒ですね。

auto

auto は、ブラウザが自動的にトラックサイズを決めてくれるんですが、
grid-template-rowsプロパティと grid-template-columnsプロパティ での auto は、あるときは min-content、あるときは max-content のような振る舞いをします。

最大値は、max-content と同じで「その内容そのもの」のサイズ。
ただし、max-content と違って align-contentと justify-contentプロパティの値 stretch によってトラックを拡張します。（これは下でサンプルで説明します）

最小値は、min-content と同じで中身の最小サイズに合わせます。

auto の align-content, justify-contentプロパティとの関係

align-contentプロパティと justify-contentプロパティは、Flexbox や Grid Layout のアイテムの揃え方を指定するものです。
タテ方向は align-content、横方向は justify-contentプロパティを使います。
（この2つのプロパティは、近々記事にします）

align-content と justify-contentプロパティのデフォルト値はどっちも normal ですが、この normal 、Flexbox と Grid Layout の場合は stretch として動作するんだって。

で、stretch は、アイテムのサイズが auto の場合、アイテムを引き伸ばしてコンテナをピッタリ満たすというもの。

auto サンプル

ここからはサンプルで、 auto と max-content の違いを見てみましょう。

下の2つのサンプルは、どっちも全く同じプレビューですね。
上のサンプルは grid-template-rows: auto 5em;
下のサンプルは grid-template-rows: max-content 5em;
と指定しています。
両方とも align-content: start; を指定しています（stretchじゃなくしてるだけ）
コンテナの高さを 10em に指定したので、start だと行が上に揃ってコンテナの下の方に空きがあります。

両方のCSSです。

.container{
  height:10em;
  align-content: start;
  grid-template-rows: auto 5em;
  grid-template-columns: 1fr 1fr;
  }
  .container2{
  height:10em;
  align-content: start;
  grid-template-rows: max-content 5em;
  grid-template-columns: 1fr 1fr;
  }

ここで両方とも align-content: stretch; を指定します。
上は grid-template-rows: auto 5em; だったので、最初の行が拡張されてアイテムがコンテナを満たすようになりました！
下は grid-template-rows: max-content 5em; なので、何も起こっていません。

auto は strech の影響を受けるということです。

両方のCSSです。

.container{
  height:10em;
  align-content: stretch;
  grid-template-rows: auto 5em;
  grid-template-columns: 1fr 1fr;
  }
  .container2{
  height:10em;
  align-content: stretch;
  grid-template-rows: max-content 5em;
  grid-template-columns: 1fr 1fr;
  }

subgrid

キーワード subgrid（サブグリッド）は、Grid Layout の grid-template-columns と grid-template-rowsプロパティだけで使える値です。

Gridアイテムに display: grid を指定することで、Gridを「入れ子」にできるんですが、その時デフォルトでは子グリッドは親のグリッドに従いません。
この子グリッドに親のグリッドを使わせるために指定する値が subgrid です

（subgridは、Firefox は ver.71 から対応。他のブラウザは未対応のようです。
　参考：Can I Use　2021年1月記）

subgrid サンプル

入れ子のグリッドを作ってみます。
HTMLはこちら。

<div class="oya">
  <div class="ko">
    <div class="item"></div>
  </div>
</div>

CSSはこちら（エリア指定をしています。エリア指定は後日紹介します）

.oya{
  border:1px solid#ccc;
  background:#ffc;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(50px, auto));
  }
.ko {
  background:#eae1cf;
  display: grid;
  grid-column: 2 / 4; /*エリア指定：ライン2〜4までの範囲という意味*/
  grid-row: 2 / 4;    /*エリア指定：ライン2〜4までの範囲*/
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  }
.item {
  background:#cff;
  grid-column: 2 / 3; /*エリア指定：ライン2〜3までの範囲*/
  grid-row: 2 / 3;    /*エリア指定：ライン2〜3までの範囲*/
  }

プレビューはこちら。

図説するとこんな感じ。
親は縦横4分割ずつ、子は3分割ずつのグリッドと、それぞれ別のグリッドにしてます。

子グリッドに subgrid を指定します。他の指定はさっきのままです。

.oya{
  border:1px solid#ccc;
  background:#ffc;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(50px, auto));
  }
.ko {
  background:#eae1cf;
  display: grid;
  grid-column: 2 / 4; /*エリア指定：ライン2〜4までの範囲という意味*/
  grid-row: 2 / 4;    /*エリア指定：ライン2〜4までの範囲*/
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  }
.item {
  background:#cff;
  grid-column: 2 / 3; /*エリア指定：ライン2〜3までの範囲*/
  grid-row: 2 / 3;    /*エリア指定：ライン2〜3までの範囲*/
  }

プレビューはこちら。親のグリッドをそのまま使えるようになりました。

Firefox（on Mac）で見たプレビューです。

次回予告

今回は長くて読むのが大変でしたね。まだ紹介していない指定も出てきたし...。

気を取り直して、次回は「Gridコンテナにエリアを作り、そのエリアに Gridアイテムを配置する方法」をやってみよう。
こちらのほうが直感的にレイアウトできて楽しいかも。
grid-template-areasと grid-areaプロパティを使います。

関連記事

• 【62-8】gridショートハンドで Gridコンテナ側の指定を一括にまとめる
• 【62-7】暗黙的トラックを指定する grid-auto-rows, grid-auto-columns
• 【62-6】Gridアイテムを自動配置する grid-auto-flowプロパティ
• 【62-5】アイテム側の位置指定を一括する grid-areaショートハンド
• 【62-4】アイテム側で位置指定をする grid-row, grid-columnプロパティ
• 【62-3】セルやエリアを一括指定する grid-templateショートハンド
• 【62-2】エリアに名前をつけて配置する grid-template-areasプロパティ
• （ちょっとメモ）サイズ指定で使う値について (min-content, repeat( ) )
• 【62-1】Grid Layout の grid-template-rows, grid-template-columns
• （ちょっとメモ）ブラウザはどうやって カラムの幅を決めるか
• 【61】各カラムの埋め方を決める column-fillプロパティ
• 【60】マルチカラム内で段抜きができる column-spanプロパティ
• 【59-4】カラム間の罫線をまとめて指定する column-rule
• 【59-3】カラム間の罫線の色を指定する column-rule-colorプロパティ
• 【59-2】カラム間の罫線の幅を指定する column-rule-width