grid-templateを部分的に使いたい

grid-templateを用いて画面を分割させたいのですが、
なぜか、右端下に要素が固まってしまい、うまく設定できません。

以前bodyタグにgrid-templateを設定しサイト全体のレイアウトを調整した際はうまく行ったのですが、
どこが間違っているのでしょう?

もしくは、部分的に適用することは不可能なのでしょうか。

html
1  <body>
2    <!-- Bootstrap適用用 -->
3    <div class="container">
4      <!-- ヘッダ -->
5      <header class="item">ヘッダ</header>
6
7      <!-- メッセージ -->
8      <section id="message">
9      </section>
10
11      <!-- メイン ここにgrid-templateを適用させたい-->
12      <main id="main">
13        <div id="kv">kv</div>
14        <div class="grid-item right1">right1</div>
15        <div class="grid-item right2">right2</div>
16        <div class="grid-item right3">right3</div>
17        <div class="grid-item left1">left1</div>
18        <div class="grid-item left2">left2</div>
19        <div class="grid-item left3">left3</div>
20        <div class="grid-item left4">left4</div>
21      </main>
22
23      <!-- フッター -->
24      <footer>
25        フッター
26        <div class="row">
27          <div class="col-sm-4">Content</div>
28          <div class="col-sm-4">Content</div>
29          <div class="col-sm-4">Content</div>
30        </div>
31      </footer>
32    </div>
33  </body>
34

CSS
1main {
2  height: 1080px;
3  background-color: aqua;
4  display: grid;
5  grid-template:
6    "...... ...... ...... ...... ......" 30px
7    "...... left1  kv     right1 ......" 1fr
8    "...... ...... ...... ...... ......" 10px
9    "...... left2  kv     right2 ......" 1fr
10    "...... ...... ...... ...... ......" 10px
11    "...... left3  kv     right3 ......" 1fr
12    "...... ...... ...... ...... ......" 10px
13    "...... left4  kv     ...... ......" 1fr
14    "...... ...... ...... ...... ......" 10px
15    / auto 1fr 10px 1fr auto;
16}
17.grid-item {
18  background-color: red;
19}
20
21#kv {
22  grid-area: kv;
23}
24
25.right1 {
26  grid-area: right1;
27}
28
29.right2 {
30  grid-area: right2;
31}
32
33.right3 {
34  grid-area: right3;
35}
36
37.left1 {
38  grid-area: left1;
39}
40
41.left2 {
42  grid-area: left2;
43}
44
45.left3 {
46  grid-area: left3;
47}
48
49.left4 {
50  grid-area: left4;
51}

行動規範の内容に同意します

回答1件

ベストアンサー

行内および列間の複数の名前付きセルトークンは、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。

grid-template-areas - CSS: カスケーディングスタイルシート | MDN

とのことですから、kvセルが飛び飛びのエリアを占めていることについて、宣言が無効になっているのだと思います。
どのようなレイアウトにしたいのかわからないですが、たとえば以下のような指定であれば有効になると思います。

css
1  grid-template:
2    "...... ...... ...... ...... ......" 30px
3    "...... left1  kv     right1 ......" 1fr
4    "...... ...... kv     ...... ......" 10px
5    "...... left2  kv     right2 ......" 1fr
6    "...... ...... kv     ...... ......" 10px
7    "...... left3  kv     right3 ......" 1fr
8    "...... ...... kv     ...... ......" 10px
9    "...... left4  kv     ...... ......" 1fr
10    "...... ...... ...... ...... ......" 10px
11    / auto 1fr 10px 1fr auto;