CSS GRID

Main
Gridの意味は検索すると格子です CSSのグリッドは、列と行を定義する水平線と垂直線の集合が交差したものです
例えばピクセル単位を使って固定トラックサイズのグリッドを作成することができます
可変サイズのグリッドを作成する為にパーセントやこの目的で新たに制定された fr 単位を使用する。

frは、fraction<意味は分数>

このページのコード

グリッド基本型

---------HTML---------
      <div class="wrapper">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
      </div>
      
---------CSS---------
      .wrapper {
        display: grid;
      }




上の基本型そのままでは何も変化は見られません「グリッドトラック」というボックスはできません : grid-template-columns および grid-template-rows プロパティを使用してグリッド上にを定義します、行は英語でRow(ロウ)、列はcolumn(カラム)、ついでにtemplate( 定型書式 )。
これらはグリッドトラックを定義します。グリッドトラックは、グリッド上の任意の2本の線の間にあるスペースです。

grid-template-columnsは
CSSプロパティで、グリッドのライン名とトラックのサイズ変更機能を定義します。
     
grid-template-rowsは
CSSプロパティで名とトラックサイズの関数を定義してグリッド行をきめる。

CSSの単位値を解らないと
ch(相対単位)は 現在の「フォント数字の0の幅」を基準とした単位です

grid-templateとは
参考サイトMDNで

ミニマム・ウィズmin-width,ミニマム・ハイトmin-heightプロパティは
ボックスの幅、高さの最小値を指定します。参考サイト