手動配置グリッドを作る
自動配置に比べスタイルの記述量は増えますが、グリッドアイテムをより自由に配置できます。テンプレートをアスキーアートのように指定して作ります。
HTML を少し変更します。
<div class="grid-container">
<div class="grid-item item-a">A</div>
<div class="grid-item item-b">B</div>
<div class="grid-item item-c">C</div>
<div class="grid-item item-d">D</div>
<div class="grid-item item-e">E</div>
<div class="grid-item item-f">F</div>
<div class="grid-item item-g">G</div>
</div>スタイルから grid-template-columns と grid-template-rows を取り去り、新たに grid-template を設定します。
.grid-container {
display: grid;
grid-template:
"a a b c" 1fr
"d e e c" 1fr
"d e e f" 1fr
"d g g g" 1fr
/1fr 1fr 1fr 1fr;
}"～" 内にその行に配置するエリアの名前を書き、外にその行の高さを指定します。
エリア名は自由に設定できますが、他のグリッドで使っているエリア名と被らないように名付けるのが無難です。ここでは分かりやすさを優先して、単純なエリア名にしています。
全ての行が定義できたら、先頭に「/」を書いてから、それぞれの列の幅を指定します。ここでは repeat() 関数を使うことはできません。
次に、アイテムごとにエリアを指定します。
.item-a { grid-area: a }
.item-b { grid-area: b }
.item-c { grid-area: c }
.item-d { grid-area: d }
.item-e { grid-area: e }
.item-f { grid-area: f }
.item-g { grid-area: g }これでグリッドの手動配置ができました。grid-template で指定したエリアに要素が収まります。
A
B
C
D
E
F
G
grid-area を変更すれば、HTML 要素の順番に拘らず指定したエリアに配置されます。また、grid-gap でアイテム間にだけ隙間を空けることができます。
.grid-container {
grid-gap: 1rem;
}
.item-a { grid-area: e }
.item-b { grid-area: c }
.item-c { grid-area: a }
.item-d { grid-area: f }
.item-e { grid-area: g }
.item-f { grid-area: b }
.item-g { grid-area: d }A
B
C
D
E
F
G
空のエリアを作る
grid-template では、ドット記号（.）を使うことで、何も配置しないエリアを作ることができます。ドットは続けて書くならいくつでも大丈夫です。
.grid-container {
grid-template:
"a a . b" 1fr
"c d d b" 1fr
".. d d e" 1fr
"f ... g g" 1fr
/1fr 1fr 1fr 1fr;
}A
B
C
D
E
F
G
アイテムの表示位置を指定する
アイテムに align-self を指定すると縦方向の位置、justify-self を指定すると横方向の位置を決めることができます。
align-self
start
center
end
stretch
justify-self
start
center
end
stretch
align-self & justify-self
align start
justify start
justify start
align center
justify center
justify center
align end
justify end
justify end
align stretch
justify stretch
justify stretch
