自動配置グリッドを作る
先程の HTML にグリッドレイアウトを適用してみましょう。app.scss を編集します。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto;
}これだけで、4×2 のグリッドが作成できます。
grid-template-columns は、グリッド列（縦方向）の数と幅を決めます。fr という単位が出てきましたが、詳しくは後述します。同じ幅に設定しているぐらいに思っておいてください。
一方、grid-template-rows は、グリッド行（横方向）の数と幅を決めます。auto となっているので、各要素の持つ高さに合わさります。
これだけでは分かりにくいので、grid-item にも少しスタイルを付けてみましょう。
.grid-item {
background-color: rgba(darkseagreen, .5);
text-align: center;
padding: 2rem 0;
border: solid .125rem rgba(darkseagreen, .75);
border-radius: .25rem;
}ここまでで以下のような表示になっていると思います。
グリッドアイテム間に隙間を空ける
グリッドレイアウトでは、アイテムとアイテムの間にだけ隙間を空けることができます。grid-gap または gap を追加しましょう。
.grid-container {
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto;
}縦方向・横方向の順に、隙間を別々に決めることもできます。
.grid-container {
grid-gap: 1rem 2rem;
}繰り返しに使える repeat()
grid-template-columns と grid-template-rows では、同じ記述を繰り返す場合、repeat 関数で置き換えることができます。
.grid-container {
grid-template-columns: repeat(4, 1fr); /* = 1fr 1fr 1fr 1fr */
grid-template-rows: repeat(2, auto); /* = auto auto */
}自動配置グリッドの注意点
Autoprefixer は、grid-template-columns と grid-template-rows からグリッドの行数と列数を読み取って、その数だけ IE でも解釈できる古い構文に置き換えています。
故に、指定したグリッド数を上回るアイテムを配置すると、IE では正しく表示されなくなってしまいます。先程の 4×2 のグリッドに 10 個のアイテムを入れてみましょう。
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
</div>スタイルを少し変更します。grid-template-rows で行の高さが 5rem になるようにし、.grid-item から padding を取り去ります。
.grid-container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 5rem); /* グリッド側で高さを指定 */
}
.grid-item {
background-color: rgba(darkseagreen, .5);
text-align: center;
border: solid .125rem rgba(darkseagreen, .75);
border-radius: .25rem;
}
Chrome では、明示的に指定した 4×2 のグリッドから溢れたアイテムの分だけ、暗黙的なグリッドが生成されています。
一方、IE ではこの暗黙的なグリッドの生成機能がなく、 明示的なグリッドから溢れたアイテムは、全て最初のグリッドアイテムの位置に被さって表示されてしまいます。
よって、自動生成グリッドの使い所としては、以下のような状況に限定されます。
- 予めアイテム数が決まっている
- ページャーなどで、1ページに表示するアイテム数が決まっている
