Q&A
重複質問だと思われますので、削除リクエストをお願いします。
https://teratail.com/questions/323022
<!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 が縦並びです。横並びにするには、どうすれば良いでしょうか。
gridをIEに対応させる方法を元の質問（https://teratail.com/questions/323022）に回答しています。
こちらの質問だとflexを使おうとした形跡がありますがどちらで対応したいのでしょうか？
回答1件
0
ベストアンサー
こんな感じでしょうか
個人的には 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}
投稿2021/02/17 08:33
総合スコア127
あなたの回答
tips
プレビュー
