投稿者: Hazuki

同じ要素に複数のスタイルがかけられ、競合してしまうことありますよね。
そういう場合、どのスタイルが優先されるかという決まりを、「カスケード」といいます。

「カスケード処理」は以下の順番で行われます。

1. CSS 提供元による優先順位
2. 詳細度による優先順位
3. 記述順位による優先順位

各内容を順番にまとめます。

1. CSS 提供元による優先順位

スタイルシート は Web 制作者が用意するもの以外にも、ユーザ側が用意するもの、ブラウザのデフォルトのものがあり、それらが組み合わさって表示されます。スタイルシートの提供元による優先順位は以下の通りです。

1. Web ページ制作者が用意した 制作者 スタイルシート
2. 閲覧するユーザが用意した ユーザ スタイルシート
3. ブラウザがデフォルトで適用する ブラウザ スタイルシート

ですが、「!important 宣言」がついたものがある場合、提供元による優先順位が入れ替わります。

1. !important 宣言付き ユーザ スタイルシート
2. !important 宣言付き 制作者 スタイルシート
3. 制作者 スタイルシート
4. ユーザ スタイルシート
5. ブラウザ スタイルシート

2. 詳細度による優先順位

セレクタの詳細度（重み）を計算して、高得点のものほど優先されます。
⇒ セレクタの種類について

＜点数＞

＜計算例＞

3. 記述順位による優先順位

詳細度が同じものは、単純に後にあるものが優先されます。

CSS でスタイルを指定しているのに反映されない場合、優先順位が問題になってることが多いようです。一度見直しが必要ですね。

⇒ その１　基本セレクタ
⇒ その２　グループ化 / 結合子
⇒ その３　疑似クラス / 疑似要素（今回）

疑似クラスと疑似要素の違いは以下の通りです。

疑似クラス ⇒ 「:link」のようにコロン1つ
要素が特定の状態である場合にスタイルを適用させる

a:link { スタイルプロパティ }
/* リンク先が未訪問の <a> 要素のスタイルを指定 */

疑似要素 ⇒ 「::first-line」のようにコロン2つ
要素の一部に対してスタイルを適用させる

p::first-line { スタイルプロパティ }
/* <p> 要素の1行目のスタイルを指定 */

以下、疑似クラスの機能ごと、及び疑似要素を表にまとめましたが、基本的に CSS レベル 1 ～ 3 のみです。
（:read-only と :read-write はレベル 4 ですが、IE 以外のメジャーの最新のブラウザで実装されているので含めました。）

疑似クラス

リンク関連

兄弟要素の位置関連

フォーム関連

その他

疑似要素

⇒ その１　基本セレクタ
⇒ その２　グループ化 / 結合子（今回）
⇒ その３　疑似クラス / 疑似要素

グループ化

CSS で複数のセレクタに同じスタイルを指定することと、HTML 側で複数のセレクタが適応される場合を考えてみます。

• セレクタリスト
• HTML で複数のスタイル適用

セレクタリスト

コンマ (,) で区切り複数のセレクタをグループ化し、同じスタイルを指定します。

セレクタ, セレクタ, セレクタ { スタイルプロパティ }

＜ 利用例 – 01 ＞
同種のセレクタをグループ化する例。
<h1> 要素と <h2> 要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<h1>h1 は適用される</h1>
<h2>h2 は適用される</h2>
<h3>h3 は適用されない</h3>

/* CSS */
h1, h2 {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02 ＞
異なる種類のセレクタをグループ化する例。
id=”main”（ID セレクタ）、class=”content”（クラスセレクタ）、<article> 要素（要素型セレクタ）に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p id="main">ID が指定されている</p>
<p class="content">クラスが指定されている</p>
<p>ID、クラスが指定されていない</p>
<article>タグが article</article>

/* CSS */
#main, .content, article {
 font-weight: 20px;
 color: lime;
}

HTML で複数のスタイル適用

HTML タグにクラスセレクタを複数適用する場合は、クラス名の間にスペースを挟んで記述します。

<要素名 class="クラス名 クラス名 クラス名"> ～ </要素名>

ID セレクタとクラスセレクタを同時に適用することもできます。

<要素名 id="ID値" class="クラス名"> ～ </要素名>

＜ スタイルが競合した場合の優先順位 ＞
詳細度が高いものが優先されます。

1. id セレクタ
2. クラスセレクタ
3. 属性セレクタ
4. 要素セレクタ
5. 全称セレクタ

同種のセレクタ（二つのクラスを持つなど）間で競合した場合は、後に書かれたものが優先となります。
さらに細かな優先順位の決まりがあるのですが、こちらにまとめました。
⇒ カスケード（スタイルの優先順位）

結合子

セレクタを組み合わせる結合子は4種類です。

• 子孫結合子
• 子結合子
• 一般兄弟結合子
• 隣接兄弟結合子

子孫結合子

セレクタを半角スペースで区切ることで、一つ目のセレクタ（親）に含まれる二つ目のセレクタ（子孫）に対してスタイルを適用させます。
（子、孫、ひ孫と、親に含まれるすべての階層に適用されます。）

セレクタ1 セレクタ2 { スタイルプロパティ }

＜ 利用例 ＞
親である<li> 要素のマーカーの種類を線の丸で黄緑色、子孫である<li> 要素のマーカーの種類を四角で橙色にする。

<!-- html -->
<ul>
  <li>リスト項目（親） 1
    <ul>
      <li>リスト項目（子） A</li>
      <li>リスト項目（子） B
        <ul>
          <li>リスト項目（孫） a</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>リスト項目（親） 2</li>
</ul>

/* CSS */
li {
  list-style-type: circle;
　color: lime;
}
li li {
  list-style-type: square;
　color: orange;
}

子結合子

セレクタを「 > 」で区切ることで、一つ目の親であるセレクタの直接の子になる二つ目のセレクタに対してスタイルを適用させます。
（子のみ。孫、ひ孫など、さらに下の階層は適用されません。）

セレクタ1 > セレクタ2 { スタイルプロパティ }

＜ 利用例 ＞
親要素の<article>の直接の子要素<div> に、フォントサイズ 20px、黄緑色を適用。
（孫要素の<div> には適用されない。）

<!-- html -->
<article>適用されない（親）
  <div>適用される（子）
    <div>適用されない（孫）</div>
  </div>
</article>

/* CSS */
article > div {
 font-weight: 20px;
 color: lime;
}

一般兄弟結合子

兄弟関係にある二つのセレクタを「 ~ 」で区切ることで、一つ目のセレクタの後に来る二つ目のセレクタに対してスタイルを適用させます。
（直後である必要はありません。）

セレクタ1 ~ セレクタ2 { スタイルプロパティ }

＜ 利用例 ＞
<article>の後にある<div> に、フォントサイズ 20px、黄緑色を適用。
（<div> は<article>より後にあればよく、直後である必要はない。）

<!-- html -->
<div>適用されない</div>
<article>適用されない</article>
<div>適用される</div>
<p>適用されない</p>
<div>適用される</div>

/* CSS */
article ~ div {
 font-weight: 20px;
 color: lime;
}

隣接兄弟結合子

兄弟関係にある二つのセレクタを「 + 」で区切ることで、一つ目のセレクタの直後に来る二つ目のセレクタに対してスタイルを適用させます。
（直後のみ。兄弟関係であっても離れていると適用されません。）

セレクタ1 + セレクタ2 { スタイルプロパティ }

＜ 利用例 ＞
<article>の直後にある<div> に、フォントサイズ 20px、黄緑色を適用。
（<div> は、<article>の後でも、離れていると適用されない。）

<!-- html -->
<div>適用されない</div>
<article>適用されない</article>
<div>適用される</div>
<p>適用されない</p>
<div>適用されない</div>

/* CSS */
article + div {
 font-weight: 20px;
 color: lime;
}

CSS のセレクタって種類多いですよね。しっかり使いこなせるように、まとめます。

⇒ その１　基本セレクタ（今回）
⇒ その２　グループ化 / 結合子
⇒ その３　疑似クラス / 疑似要素

基本セレクタ

基本セレクタは5種類あります。

• 要素型セレクタ
• 全称セレクタ
• ID セレクタ
• クラスセレクタ
• 属性セレクタ

要素型セレクタ

指定した要素名の要素に対してスタイルを適用させます。

要素名 { スタイルプロパティ }

＜ 利用例 ＞
すべての <a> 要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<a>適用される</a>
<p>こちらは適用されない</p>

/* CSS */
a {
 font-weight: 20px;
 color: lime;
}

全称セレクタ　「 * 」

すべての要素に対してスタイルを適用させます。

* { スタイルプロパティ }

＜ 利用例 – 01 ＞
すべての要素に、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<h1>これは例です</h1>
<p>これは例です</p>

/* CSS */
* {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02 ＞
.example の後に来る兄弟要素に、フォントサイズ 20px、黄緑色を適用。
（⇒ 隣接兄弟結合子参照）

<!-- html -->
<p class="example">こちらは適用されない</p>
<p>適用される</p>

/* CSS */
.example + * {
 font-weight: 20px;
 color: lime;
}

ID セレクタ

指定したid 属性の値を持つものに対してスタイルを適用させます。
id 属性の値は、同じ Web ページ内でが重複して指定できません。（次に説明するクラス属性は複数指定できます。）

#ID値 { スタイルプロパティ }

＜ 利用例 ＞
id=”example” を指定したものに対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p id="example">ID が指定されている</p>
<p>ID が指定されていない</p>

/* CSS */
#example {
 font-weight: 20px;
 color: lime;
}

クラスセレクタ

指定したクラス属性の値を持つものに対してスタイルを適用させます。
クラス属性は、同じ Web ページ内で複数指定できます。（id 属性は重複不可。）

.クラス名 { スタイルプロパティ }

＜ 利用例 – 01＞
class=”example” を指定したものに対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<p class="example">クラスが指定されている</p>
<p>クラスが指定されていない</p>

/* CSS */
.example {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02＞
class=”example” を指定した <li> 要素に対して、フォントサイズ 20px、黄緑色を適用。
「 li.example 」とスペースを挟まずに繋げて記述。

<!-- html -->
<ul>
   <li>クラスが指定されていない</li>
   <li class="example">クラスが指定されている</li>
</ul>
<p class="example">適用されない</p>

/* CSS */
li.example {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 03＞
class=”example” および “demo” の両方をクラスリストに含む <li> 要素に対して、フォントサイズ 20px、黄緑色を適用。
（⇒ HTMLでクラスを複数適用参照）
「 li.example.demo 」とスペースを挟まずに繋げて記述。

<!-- html -->
<ul>
   <li class="example">適用されない</li>
   <li class="demo">適用されない</li>
   <li class="example demo">これだけ適用される</li>
</ul>
<p class="example demo">適用されない</p>

<!-- CSS -->
li.example.demo {
 font-weight: 20px;
 color: lime;
}

属性セレクタ

指定された属性を持つ要素に対してスタイルを適用させます。

/* 指定した属性名の属性を持つ要素に適用 */
要素名[属性名] { スタイルプロパティ }

/* 指定した属性名の値全体が一致する属性を持つ要素に適用 */
要素名[属性名="値"] { スタイルプロパティ }

/* 指定した属性名の値が、スペースで区切られた複数の値の中の一つと一致する属性を持つ要素に適用　*/
要素名[属性名~="値"] { スタイルプロパティ }

/* 指定した属性名の値が、ハイフン (-) で区切られた先頭の語と一致する属性を持つ要素に適用　*/
要素名[属性名|="値"]  スタイルプロパティ }

/* 指定した属性名の値で始まる属性を持つ要素に適用　*/
要素名[属性名^="値"] { スタイルプロパティ }

/* 指定した属性名の値で終わる属性を持つ要素に適用　*/
要素名[属性名$="値"] { スタイルプロパティ }

/* 指定した属性名の値を文字列中に含む属性を持つ要素に適用　*/
要素名[属性名*="値"] { スタイルプロパティ }

＜ 利用例 – 01＞
lang の値が ja である <div> 要素に対して、フォントサイズ 20px、黄緑色を適用。

<!-- html -->
<div lang="ja">日本語だけ適用される</div>
<div lang="en">Not applicated</div>

/* CSS */
div[lang="ja"] {
 font-weight: 20px;
 color: lime;
}

＜ 利用例 – 02＞
href の値が http で始まる <a> 要素に対して、フォントサイズ 20px、黄緑色を適用。
（外部リンクのみ適用。）

<!-- html -->
<a href="/example.html">内部リンクは適用されない</a>
<a href="http://demo.com">外部リンクは適用される</a>
<a href="https://demo.com">SSLも適用される</a>

/* CSS */
a[href^="http"] {
 font-weight: 20px;
 color: lime;
}

その１ 基本

基本的な考え方

grid:display
コンテナに指定。Grid Layout モジュール利用に必須。

grid-template-rows
コンテナに指定。各行トラックの高さを指定。

grid-template-columns
コンテナに指定。各列トラックの幅を指定。

grid-row
アイテムに指定。そのアイテムの行の領域を指定。

grid-column
アイテムに指定。そのアイテムの列の領域を指定。

その２ トラック、領域の値

＜トラックの値の指定に利用できる関数＞

minmax() 関数

repeat() 関数

repeat(auto-fit | auto-fill)

repeat(auto-fit | auto=fill, minmax())

＜アイテムの領域の値の指定に利用できる記述法＞

span を利用して自動配置

負のライン番号

その３ 基本以外のプロパティ

gap プロパティ
コンテナに指定。トラック間の隙間を指定。

grid-template-areas と grid-area の組み合わせ
grid-template-areas はコンテナ、 grid-area はアイテムに指定。名前付きの領域を指定。

grid-auto-row, grid-auto-column
コンテナに指定。拡張したトラックの大きさを指定。

grid-auto-flow
コンテナに指定。アイテムを配置する方向を指定。

＜Grid Layout モジュール以外のプロパティ＞

justify-content
align-content
justify-item
align-item
justify-self
align-self
order

その４ ショートハンド

grid-template でまとめる
grid-template-rows, grid-template-coloums, grid-template-areas のショートハンド。

grid でまとめる
コンテナに指定するプロパティを、ほぼ全部、まとめられるショートハンド。

grid-gap でまとめる
grid-row-gap, grid-column-gap のショートハンド。

grid-row, grid-column 開始と終了を分けて記述
grid-row-start, grid-row-end または grid-column-start, grid-column-end に分ける。

その５ IE 対応

Grid Layout IE ベンダープレフィックス対応表

Autoprefixer
ベンダープレフィックスを自動に書き込むツール

「Grid Layout を使いこなす」全6回です。

⇒　その１ 基本
⇒　その２ トラック、領域の値
⇒　その３ 基本以外のプロパティ
⇒　その４ ショートハンド
⇒　その５ IE 対応（今回）
⇒　その６ まとめ

とても便利な Grid Layout ですが、IE10-11 、Edge 10-15 では、古い仕様（W3C Working Draft 7 April 2011）が実装されていて、そのままではレイアウトが反映されません。古いブラウザといっても、わずかながらシェアがあり、マイクロソフトのサポートも続いているわけで、無視できませんよね。

ベンダープレフィックスの記述が必要となりますが、利用できるプロパティに制限があり、どちらかにしかないプロパティもあります。そういった点を踏まえて記述する必要があります。

Grid Layout IE ベンダープレフィックス対応表

grid-template-areas に対応するベンダープレフィックスはありませんので、
コンテナ：-ms-grid-rows, -ms-grid-columns,
アイテム：-ms-grid-row, -ms-grid-row-span, -ms-grid-column, -ms-grid-column-span
で記述する方法となります。

また、grid-auto-flow で並ぶ方向を指定するというのにも対応するものがないので、値に column または dense を指定している場合は、アイテムごとに領域を指定しなくてはいけないようです。

Autoprefixer

上の対応表を見ながら、一つずつベンダープレフィックスを書き込んでいく・・・というと、地獄のような作業ですが、Autoprefixer というツールを利用するとこれを自動的に行ってくれます！
Gulp のプラグインなどで使うのが普通のようですが、Gulp のダウンロードも含めて、それは別の機会にまとめます。
Autoprefixer は、手軽に Web でも利用できます。今回はこちらを利用します。

Autoprefixer CSS online

左の欄に CSS を書き込み、下の枠に対象となるブラウザを指定し、「Apply」をクリックします。
そうすると、右の欄に、ベンダープレフィックスの含まれた CSS が表示されます。
便利ですねー！

ですが、grid-template-areas や、grid-gap など、ベンダープレフィックスに対応するプロパティがないものは、web の Autoprefixer では、自動的にそれに合うように変更されません。そのようなものを使わないか、手書きで調整することになります。

「Grid Layout を使いこなす」全6回です。

⇒　その１ 基本
⇒　その２ トラック、領域の値
⇒　その３ 基本以外のプロパティ
⇒　その４ ショートハンド（今回）
⇒　その５ IE 対応
⇒　その６ まとめ

ショートハンド一覧

Grid Layout プロパティのショートハンドです。

grid-template でまとめる

トラックの大きさを指定する grid-template-rows、grid-template-coloums、名前付きの領域を定義する grid-template-areas をまとめて指定ショートハンドです。
コンテナ（親要素）に指定。

指定の方法は2通りあります。
この図のレイアウトを指定する例です。

＜方法 ① grid-template-rows / grid-template-columns をまとめる＞

grid-template: 200px 1fr  / 300px 1fr;  /* 各行トラック高さ / 各列トラック幅 */

行と列の間には、スラッシュを挟みます。

＊ この方法では、grid-template-areas は初期化されます。grid-template-areas を合わせて指定したい場合は、grid-template の後に、grid-template-areas を指定します。

＜方法 ② grid-template-areas　grid-template-rows / grid-template-columns をまとめる＞

grid-template: "head head" 200px  /* "1行目各列エリア名" 1行目トラック高さ */
               "nav  main" 1fr    /* "2行目各列エリア名" 2行目トラック高さ */
              / 300px 1fr         /* / 各列トラック幅 */

実際のレイアウトと近い配置に指示が書かれるので、CSS 上でも視覚化されるような指定方法ですね。
行、列の大きさは省略可。

grid でまとめる

コンテナに指定するプロパティを、ほぼ全部、まとめられるショートハンドです。
grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow を単一の宣言で設定します。

指定の方法は３通りあります。

＜方法 ① grid-template-area　grid-template-rows / grid-template-columns をまとめる＞
grid-template の方法 ① 、または方法 ② と同じです。
（ですが、grid-template とは異なり、grid では、ほかの grid のサブプロパティはすべて、初期値に初期化されます。）

grid: 200px 1fr / 300px 1fr;  /* 各行トラック / 各列トラック */

grid: "head head" 200px  /* "1行目各列エリア名" 1行目トラック高さ */
      "nav  main" 1fr    /* "2行目各列エリア名" 2行目トラック高さ */
     / 300px 1fr         /* / 各列トラック幅 */

＜方法 ② grid-auto-flow: row と grid-template-columns をまとめる＞
grid-auto-flow: row を指定するので、アイテムは1行目から順に右から左へ埋められていきます。
行トラック数 ⇒ 可変。全てのアイテムが埋まるまで行は加算されます。
列トラック数 ⇒ 固定。このプロパティで指定した数。

grid: auto-flow 100px / 1fr 1fr 1fr;   /* 行に auto-flow、行トラックの高さ / 各列トラックの幅 */

スラッシュ前：行を定義しています。auto-flow で、アイテムの並び方（grid-auto-flow: row）と行数可変を指定し、続いて 100px と行の高さを指定しています。
スラッシュ後：列を定義しています。1fr の幅で 3 列になります。

＜方法 ③ grid-template-rows と grid-auto-flow: column をまとめる＞
grid-auto-flow: column を指定するので、アイテムは1列目から順に上から下へ埋められていきます。
行トラック数 ⇒ 固定。このプロパティで指定した数。
列トラック数 ⇒ 可変。全てのアイテムが埋まるまで列は加算されます。

grid: 1fr 1fr 1fr / auto-flow 100px;  /* 各行トラックの高さ / 列に auto-flow、列トラックの幅 */

スラッシュ前：行を定義しています。1fr の高さで 3 行になります。
スラッシュ後：列を定義しています。auto-flow で、アイテムの並び方（grid-auto-flow: column）と列数可変を指定し、続いて 100px と列の幅を指定しています。

grid-gap でまとめる

トラック間の隙間を指定する grid-row-gap と grid-column-gap をまとめて指定するショートハンドです。
コンテナ（親要素）に指定。

grid-gap: 10px;  /* 行列ともトラック間の隙間 10px */

grid-gap: 3% 5%;  /* 行トラック間の隙間 3%　列トラック間の隙間 5% */

grid-gap は、値が1つの場合は、行、列とも一括指定、スペースを挟んで二つの場合は、1つ目が行、2つ目が列の値になります。

grid-row, grid-column 開始と終了を分けて記述

アイテムの領域を指定する grid-row と grid-column は、開始と終了のライン番号をまとめて記述しているショートハンドです。
これを、開始と終了を分けて指定することができます。
アイテム（子要素）に指定。

grid-row-start: 1; /* 行の領域の開始するライン番号 */
grid-row-end: 2;   /* 行の領域の終了するライン番号 */

grid-column-start: 2; /* 列の領域の開始するライン番号 */
grid-column-end: 3;   /* 列の領域の終了するライン番号 */

「Grid Layout を使いこなす」全6回です。

⇒　その１ 基本
⇒　その２ トラック、領域の値
⇒　その３ 基本以外のプロパティ（今回）
⇒　その４ ショートハンド
⇒　その５ IE 対応
⇒　その６ まとめ

これまで触れてきた基本となる5つのプロパティ一覧です。

Grid Layout モジュールに含まれる、これ以外のプロパティをまとめます。

gap プロパティ

トラック間の隙間を定義するプロパティで、親要素（コンテナ）で指定します。

grid-row-gap　⇒ 　行の間の隙間を指定
grid-column-gap ⇒ 列の間の隙間を指定

grid-row-gap: 3%;

grid-column-gap: 20px;

値には、px、em、%、normal（ブラウザに依存）などが指定できます。

grid プロパティには、calc() 関数も利用できます。

grid-row-gap: cal(20px + 10%);

＊ CSS の仕様書を読むと、当初は grid-gap プロパティで定義されていましたが、今は、この接頭辞なしの、gap に置き換えられています。
grid-row-gap ⇒ gap-row
grid-colomn-gap ⇒ gap-colomn
ですが、grid-gap を実装していて、gap を実装していないブラウザがあるため、接頭辞付きのプロパティを使用した方がいいようです。

grid-template-areas と grid-area の組み合わせ

grid-template-areas は、各アイテムに対して、名前付きの領域を定義するプロパティで、親要素（コンテナ）で指定します。

grid-area を使って、アイテムと領域の名前を関係づけます。

この図のレイアウトを例にして、領域を指定する場合を見ていきます。

まず、コンテナの方で、各領域を指定します。（それぞれのアイテムに grid-column、grid-row で領域を指定する代わりとなります。）

.wrapper {
display: grid;
grid-template-areas: "head head" /* 1行目の1列目　1行目の2列目 */
                     "nav  main" /* 2行目の1列目　2行目の2列目 */
grid-template-rows: 200px 1fr;
grid-template-columns: 300px 1fr;
}

grid-area を使って、grid-template-areas で定義した領域の名前を、各アイテムと関連付けるクラスを作ります。

.head {
grid-area: head;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}

grid-auto-row, grid-auto-column

拡張したトラックの大きさを指定するプロパティです。
トラックの大きさは、grid-template-rows / grid-template-columns で指定しますが、アイテムがそこに収まらない場合も考えられます。例えば、セルに対して、アイテムの方が多すぎる、なんていう場合です。
また、コンテナにそもそも grid-template-rows / grid-template-columns を指定していない場合、行数、列数、大きさが不明ということもあります。
こういった場合に、grid-auto-rows / grid-auto-columns で、トラックの幅を指定します。コンテナに指定します。

grid-auto-row: minmax(20% 1fr);

grid-auto-column: 20px;

値には、長さの単位、%、fr、max-content、min-content、minmax()関数、auto（初期値）が指定できます。

grid-auto-flow

アイテムを配置する方向を指定するプロパティです。
アイテムに grid-row、 grid-column、grid-area を特に指定しない場合、アイテムは、1行目の左から右へ、2行目の左から右へ・・・と埋まっていきます。
これはデフォルトで、grid-auto-flow: row となっているからです。

《 アイテムの配置される順番（grid-row、 grid-column、grid-areaで指定がない場合）》
grid-auto-flow: row ⇒ 1行目の左から右へ、2行目の左から右へ・・・
grid-auto-flow: column ⇒ 1列目の上から下へ、2列目の上から下へ・・・
grid-auto-flow: dense ⇒ 空いているスペースをなるべく埋める
grid-auto-flow: row dense ⇒ 1行目の左から右へ、2行目の左から右へ・・・空いているスペースをなるべく埋める
grid-auto-flow: column dense ⇒ 1列目の上から下へ、2列目の上から下へ・・・空いているスペースをなるべく埋める

Grid Layout モジュール以外のプロパティ

Grid Layout モジュール以外のプロパティで、配置の指定によく利用するものをまとめます。

justify-content： コンテナに指定。グリッドの水平方向の配置
値： start（右揃え、デフォルト）, center（中央揃え）, end（左揃え）

align-content： コンテナに指定。グリッドの垂直方向の配置
値： start（上揃え、デフォルト）, center（中央揃え）, end（下揃え）

justify-item： コンテナに指定。全アイテムの水平方向の配置
値： start（右揃え、デフォルト）, center（中央揃え）, end（左揃え）

align-item：コンテナに指定。グリッドの垂直方向の配置
値： start（上揃え、デフォルト）, center（中央揃え）, end（下揃え）

justify-self： アイテムに指定。そのアイテムの水平方向の配置
値： start（右揃え、デフォルト）, center（中央揃え）, end（左揃え）

align-self：アイテムに指定。そのアイテムの垂直方向の配置
値： start（上揃え、デフォルト）, center（中央揃え）, end（下揃え）

order： アイテムに指定。並ぶ順番
値： 整数