例えばピクセル単位を使って固定トラックサイズのグリッドを作成することができます
可変サイズのグリッドを作成する為にパーセントやこの目的で新たに制定された fr 単位を使用する。
frは、fraction<意味は分数>
サンプルコード
グリッド基本型
---------HTML---------
---------CSS---------
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
}
上の基本型そのままでは何も変化は見られません「グリッドトラック」というボックスはできません : grid-template-columns および grid-template-rows プロパティを使用してグリッド上に行と列を定義します、行は英語でRow(ロウ)、列はcolumn(カラム)、ついでにtemplate( 定型書式 )。
これらはグリッドトラックを定義します。グリッドトラックは、グリッド上の任意の2本の線の間にあるスペースです。