CSS3からの追加仕様③（グリッドテンプレート）
このシリーズが全然終わらない…笑
それほど たくさん追加されているのね…!!
①は、こちら↓
②は、こちら↓
（11）グリッドテンプレート
グリッドレイアウトを構成する時に各種情報を設定できる。
大前提として、「display」プロパティをgridにする必要あり。
display: grid;①grid-template-rows
隣接する2本のグリッドラインで区切られた間に生じる
スペース（グリッドトラック）の縦幅の指定。
②grid-template-columns
隣接する2本のグリッドラインで区切られた間に生じる
スペース（グリッドトラック）の横幅の指定。
【①②に設定できる値】
none
指定なし（デフォルト）
長さを表す数値、%値、フレックス係数、キーワード、
関数、グリッド名、など
（①②のCSS例）
div.sample2 {
display: grid;
grid-template-rows: 80px 100px 40px;
grid-template-columns: 50px 100px 40px;
}
div.sample2 div {
margin:4px; border-radius:4px;
background-color:#66cc99;
}（HTML）
<div class="sample1">
<div>一</div>
<div>ニ</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
<div>七</div>
<div>八</div>
<div>九</div>
</div>③grid-template-areas
「grid-template-areas」プロパティを使うと、グリッドトラックに名前を付けて定義できる。
定義した名前をグリッドアイテムに割当てる時は、「grid-area」プロパティを使用する。
【設定できる値】
none
名前設定なし（デフォルト）
任意の文字列
ダブルクォーテーション内でスペースで区切ることで列、
ダブルクォーテーション間でスペースあるいは改行で行を定義。
（例）
.grid-container {
grid-template-areas:"cell1 cell1 cell2" "cell3 cell4 cell2" "cell5 cell6 none" ". cell7 .";
}
.grid-container .grid-item:nth-of-type(1) {
grid-area:cell1;
}
.grid-container .grid-item:nth-of-type(2) {
grid-area:cell2;
}
.grid-container .grid-item:nth-of-type(3) {
grid-area:cell3;
}
.grid-container .grid-item:nth-of-type(4) {
grid-area:cell4;
}
.grid-container .grid-item:nth-of-type(5) {
grid-area:cell5;
}
.grid-container .grid-item:nth-of-type(6) {
grid-area:cell6;
}
.grid-container .grid-item:nth-of-type(7) {
grid-area:cell7;
}「none」と「.」の違いは、nullとnullstring的な違いといったところだろうか。（枠はあるけど名無しなのが「.」）
④grid-template
「grid-template」プロパティを使うと、グリッドトラックの
リスト情報をまとめて設定できる。
（「grid-template」＝ 「grid-template-rows」＋「 grid-template-columns」＋「grid-template-areas」的な感じ）
【設定できる値】
none
grid-template-rows／grid-template-columns／grid-template-areas
の初期値（デフォルト）
grid-template-rows / grid-template-columnsの値
半角スラ（ / ）区切りで記載
grid-template-areasの値
grid-template-rows／grid-template-columnsの値と
半角スペースでつないで記載
（まとめて設定する例）
grid-template: "cell1 cell2" 80px
"cell3 cell4" 1fr
". cell5" 50px
/ 100px 1fr;
（別個で設定する例）
grid-template-areas: "cell1 cell2"
"cell3 cell4"
". cell5";
grid-template-rows: 80px 1fr 50px;
grid-template-columns: 100px 1fr;⑤grid-auto-flow
グリッドアイテムの自動配置方法を設定できる。
レイアウトに対してグリッドアイテムが多いケースでは
グリッドアイテムがはみ出るが、どのように対応するかを設定する感じ。
（9分割したエリアに10個のアイテムを表示させる場合、
残りの１個をどう表示するか）
【設定できる値】
none
設定なし（デフォルト）
row
各行に順番に配置する。
必要に応じて新しい行が追加される。（デフォルト）
column
各列に順番に配置する。
必要に応じて新しい列が追加される。
dense
空白グリッドを埋めてパッキングするようグリッドアイテムが
自動配置される。
グリッドアイテムのサイズの大小をもとにパッキング順が決まる。
（row や column に追記して使用）
denseを使うと、空スペースをできるだけ埋めた状態でアイテム配置してくれる。うまい感じにテトリスしてくれる系。
（例）
.container {
grid-auto-flow: row dense;
}⑥grid
グリッドについてまとめて設定できる。
明示的なグリッド（grid-template-rows／grid-template-columns／grid-template-areasプロパティ）に関する設定、
または暗黙的なグリッド（grid-auto-rows／grid-auto-columns／grid-auto-flowプロパティ）に関する設定ができる。
ただし、1つのgridプロパティ宣言で「明示的なグリッドプロパティ値」OR「暗黙的なグリッドプロパティ値」のどちらか１つのみが指定できる。
【設定できる値】
grid-templateの値
grid-template-rows/grid-template-columnsの値
grid-auto-rows/grid-auto-columnsの値
grid-template-areasの値
grid-auto-flowの値
まだまだ細かい仕様追加はたくさんありそうだけど、
ひとまずここで一区切り…。
【出典】
この記事が気に入ったらサポートをしてみませんか？