HTML CSSの質問です。写真のものを作成したですがうまくできないです。下記にコードを記載しました。どこを直したら良いのかわかる方教えていただけますか。GridLayoutを使ってのレイアウトです。 よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> .container { display: grid; grid:1fr / 3fr 1fr; gap: 7px; width: 90%; margin: 20px auto; padding: 8px; border: 1px solid black; } .main { display: grid; grid:repeat(7,auto)/ 1fr; gap: 8px;} .header { font-weight: bold; font-size: 1.4rem; border: 1px solid black; height: 70px; align-content: center; } .nav { font-weight: bold; border: 1px solid black; height: 50px; align-content: center; } .wrap{ display: grid; gap: 4px;} .row { display: grid; gap: 4px; padding: 4px; border: 1px solid black; } .row-1 { grid-template-columns: repeat(4, 1fr); } .row-2 { grid-template-columns: repeat(3, 1fr); } .row-3 { grid-template-columns: repeat(2, 1fr); } .row-4 { grid-template-columns: repeat(4, 1fr); } .box { border: 1px solid black; display: grid; height: 100px; } .cyan { background-color: cyan; } .green { background-color: lightgreen; } .pink { background-color: pink; } .blue { background-color: lightblue; } .side { border: 1px solid black; display: grid; gap: 4px; padding: 4px; } .side .row { height: 106px; padding: 0; } .side .box{ height: 100%; } .divs2 .divs3 {border: 0px;} footer { border: 1px solid black; height: 40px; align-content: center; } </style> </head> <body> <div class="container"> <div class="main"> <header>ヘッダー</header> <nav>メニュー</nav> <div class="wrap"> <div class="main"> <div class="row row-1"> <div class="box cyan">1段目</div> <div class="box cyan">1段目</div> <div class="box cyan">1段目</div> <div class="box cyan">1段目</div> </div> <div class="row row-2"> <div class="box green">2段目</div> <div class="box green">2段目</div> <div class="box green">2段目</div> </div> <div class="row row-3"> <div class="box pink">3段目</div> <div class="box pink">3段目</div> </div>
