CSS gridを使って2つのサイドバーの間にセクションを配置したい

前提・実現したいこと

CodeSandbox
↑ サイドバーが両サイドにある3カラムレイアウトです。

サイドバーの間に、すべてのセクションを配置したいです。
セクションの高さは可変です。
セクションの高さに合わせて、サイドバーの高さも伸ばしたいです。

また、セクションの数が増える可能性があるので、各セクションに指定しているgrid-rowを入力しなくてよい方法があれば、併せてご教示いただきたいです。

発生している問題・エラーメッセージ

2つ目以降のセクションはサイドバーの下に配置されます。

該当のソースコード

html
1<body>
2    <section class="sec1">
3      <h2>セクション1</h2>
4      <p>テキストテキストテキストテキストテキストテキストテキスト</p>
5    </section class="sec2">
6    <section>
7        <h2>セクション2</h2>
8        <p>テキストテキストテキストテキストテキストテキストテキスト</p>
9        <p>テキストテキストテキストテキストテキストテキストテキスト</p>
10    </section>
11    </section class="sec3">
12    <section>
13        <h2>セクション3</h2>
14        <p>テキストテキストテキストテキストテキストテキストテキスト</p>
15        <p>テキストテキストテキストテキストテキストテキストテキスト</p>
16        <p>テキストテキストテキストテキストテキストテキストテキスト</p>
17        <p>テキストテキストテキストテキストテキストテキストテキスト</p>
18        <p>テキストテキストテキストテキストテキストテキストテキスト</p>
19        <p>テキストテキストテキストテキストテキストテキストテキスト</p>
20    </section>
21    <aside class="side1">
22      <h2>サイドバー1</h2>
23      <p>テキスト</p>
24    </aside>
25    <aside class="side2">
26      <h2>サイドバー3</h2>
27      <p>テキスト</p>
28      <p>テキスト</p>
29      <p>テキスト</p>
30      <p>テキスト</p>
31      <p>テキスト</p>
32      <p>テキスト</p>
33    </aside>
34  </body>

css
1body {
2  display: grid;
3  grid-template-columns: 200px 1fr 200px;
4  grid-template-rows: auto;
5  margin: 0;
6}
7
8section,
9aside {
10  padding: 1rem;
11}
12
13aside {
14  background: black;
15  color: white;
16  min-height: 100vh;
17}
18
19.side1 {
20  grid-column: 1;
21  grid-row: 1;
22}
23
24.side2 {
25  grid-column: 3;
26  grid-row: 1;
27}
28
29.sec1 {
30  grid-column: 2;
31  grid-row: 1;
32}
33
34.sec2 {
35  grid-column: 2;
36  grid-row: 2;
37}
38
39.sec3 {
40  grid-column: 2;
41  grid-row: 3;
42}

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

回答1件

ベストアンサー

サイドバーの grid-row の上端と下端を指定すればいいでしょう。

css
1.side1 {
2  grid-column: 1;
3  grid-row: 1/4;
4}
5
6.side2 {
7  grid-column: 3;
8  grid-row: 1/4;
9}

また、セクションの数が増える可能性があるので、各セクションに指定しているgrid-rowを入力しなくてよい方法があれば、併せてご教示いただきたいです。

その前にHTMLが間違ってますね。

html
1   </section class="sec2">

閉じタグにクラスを設定してます。sec3 も。

grid-row が必要ないなら、クラスは不要です。

html
1    <section>
2         略
3    </section>
4    <section>
5         略 
6    </section>
7    <section>
8         略
9    </section>
10    <aside class="side1">
11         略
12    </aside>
13    <aside class="side2">
14         略
15    </aside>