grid-templateプロパティ
プロパティgrid-templateは、
グリッド内の要素が占める行と列の数と幅を指定し、
プロパティgrid-template-rows
およびgrid-template-columnsの
一括指定形式です。
要素が配置される行と列はスラッシュで区切って指定します。
プロパティgrid-templateは親要素に設定され、
子要素の配置を決定します。
プロパティ値では、行や列の幅を任意の
寸法単位で指定します。
プロパティ値にピクセル値を指定した場合、
要素のサイズは正確にその値に従います。
キーワードautoを指定すると、列と行は
利用可能なすべてのスペースを埋めます。
単位fr(フラクション)を使用すると、
すべてのスペースが均等な割合に分割されます。
frの利点は、異なるコンテナや画面解像度に
適応できることです。これは、
frがピクセル単位の正確なサイズに依存せず、
指定された数のフラクションに分割するだけだからです。
構文
セレクタ {
grid-template: 行の幅と数 / 列の幅と数;
}
例
プロパティgrid-templateを使用して表を作成しましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
例
次に、2行目と3行目の幅を同じにし、 各列の幅を異なる値に設定してみましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template: 60px 1fr 60px / 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
例
前の例の表で、一番上の行の幅を2フラクションに、 最初の列の幅を0.5フラクションに変更してみましょう:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
関連項目
-
列と行のプロパティを一括指定する
プロパティ
grid -
グリッド内の行の数と幅を指定する
プロパティ
grid-template-rows -
グリッド内の列の数と幅を指定する
プロパティ
grid-template-columns