display:grid の入れ子

「CSS でボックスを横に並べるのに top,left を使ってダメだった話」
https://qiita.com/nanbuwks/items/ea3c6c17899764ca5cee

では float:left  を使って解決しました。
しかしながらたてこんだレイアウトを作ろうとするとわけがわからなくなったので、`display:grid` で解決しました(未記事化)。

それとは別に、このようなレイアウトを作ることになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f3d3c930-1817-644d-99b1-2b3a26232c44.png)




灰色の3つの長角丸は `INPUT TYPE=SUBMIT` です。
一番上の `SUBMIT` は 一番上の枠に入れていて、2番め3番目を赤の枠に横に並べたい。

# 環境


- Google Chrome 103.0.5060.114
- Ubuntu Linux 22.04 LTS

# コード

まずは、以下のようなものを試してみました。
html
```html
<!DOCTYPE html>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<link href="style.css" rel="stylesheet">
</HEAD>
<BODY>
<DIV class="container">
<DIV class="title">
<FORM ACTION=. METHOD=POST>
<INPUT TYPE=SUBMIT VALUE="" >
</FORM>
</DIV>
<DIV class="button2">
</DIV>
<DIV class="controls">
<DIV class="button1">
<FORM ACTION=. METHOD=POST>
<INPUT TYPE=SUBMIT VALUE="" >
</FORM>
</DIV>
<DIV class="button2">
<FORM ACTION=. METHOD=POST>
<INPUT TYPE=SUBMIT VALUE="" >
</FORM>
</DIV>
</DIV>
<DIV class="status">
</DIV>
<DIV class="memo">
</DIV>
</DIV>
</BODY>
</HTML>

```
css
```css
.container {
        border: 1px solid #000000;
        display: grid;
        width:400px;
        height:400px;
        margin:0 auto;
        grid-template-columns: 400px;
        grid-template-rows: 100px 100px 100px 100px;
}
.title {
        border: 1px solid #008888;
        margin-top: 5px;
        margin-left: 5px;
        grid-column: 1/2;
        grid-row: 1/2;
        width:390px;
        height:90px;
}
.title input[type="submit"]{
        margin-top: 5px;
        margin-left: 5px;
        width:380px;
        height:80px;
        border-radius: 18px;
        background: #33333;
}
.controls {
        border: 1px solid #FF0000;
        margin-top: 5px;
        margin-left: 5px;
        grid-column: 1/2;
        grid-row: 2/3;
        width:390px;
        height:90px;
}
.button1 input[type="submit"]{
        margin-top: 5px;
        margin-left: 5px;
        width:190px;
        height:80px;
        border-radius: 18px;
        background: #999999;
}
.button2 input[type="submit"]{
        margin-top: 5px;
        margin-left: 5px;
        width:190px;
        height:80px;
        border-radius: 18px;
        background: #BBBBBB;
}
.status{
        border: 1px solid #00FF00;
        margin-top: 5px;
        margin-left: 5px;
        left: 5px;
        grid-column: 1/2;
        grid-row: 3/4;
        width:390px;
        height:90px;
}
.memo{
        border: 1px solid #0000FF;
        margin-top: 5px;
        margin-left: 5px;
        grid-column: 1/2;
        grid-row: 4/5;
        width:390px;
        height:90px;
}

```
# 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/e7c4b3ea-ab91-d765-79dc-b2fea081e223.png)

title, control , status , memo のボックスを `display:grid ` で 4つ縦に並ばせています。

灰色の3つの長角丸は `INPUT TYPE=SUBMIT` です。
一番上の `SUBMIT` は 一番上の枠に入れていて、2番目3番目を赤の枠に横に並べたい。
一番上の `SUBMIT` はいいのですが、2番目3番目が入っていません。

# display:grid の入れ子
これについて、 `display:grid ` をもう一つ使って以下のようにしました。

 

```css
.container {
        border: 1px solid #000000;
        display: grid;
        width:400px;
        height:400px;
        margin:0 auto;
        grid-template-columns: 400px;
        grid-template-rows: 100px 100px 100px 100px;
}
.title {
        border: 1px solid #008888;
        margin-top: 5px;
        margin-left: 5px;
        grid-column: 1/2;
        grid-row: 1/2;
        width:390px;
        height:90px;
}
.title input[type="submit"]{
        margin-top: 5px;
        margin-left: 5px;
        width:380px;
        height:80px;
        border-radius: 18px;
        background: #33333;
}
.controls {
        border: 1px solid #FF0000;
        margin-top: 5px;
        margin-left: 5px;
        grid-column: 1/2;
        grid-row: 2/3;
        width:390px;
        height:90px;
        display: grid;
        grid-template-columns: 190px 190px;
        grid-template-rows: 90px;
}
.button1 input[type="submit"]{
        margin-top: 5px;
        margin-left: 5px;
        grid-column: 1/2;
        grid-row: 1/2;
        width:180px;
        height:80px;
        border-radius: 18px;
        background: #999999;
}
.button2 input[type="submit"]{
        margin-top: 5px;
        margin-left: 5px;
        grid-column: 2/3;
        grid-row: 1/2;
        width:180px;
        height:80px;
        border-radius: 18px;
        background: #BBBBBB;
}
.status{
        border: 1px solid #00FF00;
        margin-top: 5px;
        margin-left: 5px;
        left: 5px;
        grid-column: 1/2;
        grid-row: 3/4;
        width:390px;
        height:90px;
}
.memo{
        border: 1px solid #0000FF;
        margin-top: 5px;
        margin-left: 5px;
        grid-column: 1/2;
        grid-row: 4/5;
        width:390px;
        height:90px;
}
```

うまくいきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f3d3c930-1817-644d-99b1-2b3a26232c44.png)