main nav asideを横並びにしたい

<!doctype html>
<head><link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
    <header>a</header>
    <div clas="wrapper">
    <nav>a</nav>
    <main>a</main>
    <aside>a</aside>
    </div>
    <footer>a</footer>

</body>
</html>

body {
    margin:0;
    min-height:100vh;
    display:grid;
    grid-template-rows:100px 1fr 100px;
    grid-template-columns:100px 1fr 100px;
    grid-template:
        "header header header"
        "left center right"
        "footer footer footer";
    }

    header {
        grid-area:header;
        border:solid 1px black;
    }

    .display {
        display:flex;
    }
    
    main {
        grid-area:center;
        border:solid 1px black;
    }

    nav {
        grid-area:left;
        border:solid 1px black;
    }

    aside {
        grid-area:right;
        border:solid 1px black;
    }

    footer {
        grid-area:footer;
        border:solid 1px black;
    }

main nav aside が縦並びです。横並びにするには、どうすれば良いでしょうか。

Lhankor_Mhy

2021/02/17 06:43

重複質問だと思われますので、削除リクエストをお願いします。 https://teratail.com/questions/323022

dit.

2021/02/17 07:35

gridをIEに対応させる方法を元の質問（https://teratail.com/questions/323022）に回答しています。こちらの質問だとflexを使おうとした形跡がありますがどちらで対応したいのでしょうか？

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

回答1件

ベストアンサー

こんな感じでしょうか
個人的には wrapper でラッピングする必要もなく、メディアクエリーで制御すればスッキリ出来るとおもいますが。
一応、元のコードで書くと以下のような感じになるかと思います。

スペルミス clas="wrapper"
プロパティー grid-template ではなく、grid-template-areas

html
1<body>
2  <header>header</header>
3  <div class="wrapper">
4    <nav>nav</nav>
5    <main>main</main>
6    <aside>aside</aside>
7  </div>
8  <footer>footer</footer>
9</body>

CSS
1body {
2  margin: 0;
3  min-height: 100vh;
4  display: grid;
5  grid-template-rows: 100px 1fr 100px;
6  grid-template-areas: "header" "wrapper" "footer";
7}
8
9header {
10  grid-area: header;
11  border: solid 1px black;
12}
13
14.wrapper {
15  grid-area: wrapper;
16  display: grid;
17  grid-template-columns:100px 1fr 100px;
18  grid-template-areas: "left center right";
19}
20
21main {
22  grid-area: center;
23  border: solid 1px black;
24}
25
26nav {
27  grid-area: left;
28  border: solid 1px black;
29}
30
31aside {
32  grid-area: right;
33  border: solid 1px black;
34}
35
36footer {
37  grid-area: footer;
38  border: solid 1px black;
39}