我正在尝试创建一个带有一些复杂CSS网格的页面。
请参阅图片以获得预期结果。
请参阅代码段查看我的错误代码；-)
困难是当我想放置在里面时，我不能（我尝试了很多方法...）
仅使用CSS怎么做？谢谢你的帮助。
---------------
body {
display: grid;
padding: 20px;
grid-gap: 20px;
grid-template-rows: repeat(4, minmax(100px, auto));
grid-template-columns: 100px repeat(5, 1fr);
background: #fff;
}
.box {
border: solid 1px #000;
}
#logo {
grid-row: 1;
grid-column: 1;
}
#menu {
grid-row: 1;
grid-column: 2 / span 5;
}
#main {
grid-row: 2;
grid-column: 1 / span 4;
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
grid-gap: 10px;
}
#aside_B {
grid-row: 3;
grid-column: 1 / -1;
}
#aside_A {
grid-row: 2;
grid-column: 5 / span 2;
}
#footer {
grid-row: 4;
grid-column: 1 / -1;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header id="logo">LOGO</header>
<nav id="menu" class="box">MENU</nav>
<main id="main">
<article id="article" class="box">Article</article>
<aside id="aside_B" class="box">
B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B
</aside>
</main>
<aside id="aside_A" class="box">
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A
</aside>
<footer id="footer" class="box">Footer</footer>
</body>
</html>最佳答案
您必须更新您的DOM才能获得期望的结果。检查代码段。
body {
display: grid;
padding: 20px;
grid-gap: 20px;
grid-template-rows: repeat(4, minmax(100px, auto));
grid-template-columns: 100px repeat(5, 1fr);
background: #fff;
}
.box {
border: solid 1px #000;
}
#logo {
grid-row: 1;
grid-column: 1;
}
#menu {
grid-row: 1;
grid-column: 2 / span 5;
}
#main {
grid-row: 2;
grid-column: 1 / span 4;
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
grid-gap: 10px;
}
#aside_B {
grid-row: 3;
grid-column: 1 / -1;
}
#aside_A {
grid-row: 2;
grid-column: 5 / span 2;
}
#footer {
grid-row: 4;
grid-column: 1 / -1;
}<header id="logo">LOGO</header>
<nav id="menu" class="box">MENU</nav>
<main id="main">
<article id="article" class="box">Article</article>
</main>
<aside id="aside_A" class="box">
A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A
</aside>
<aside id="aside_B" class="box">
B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B<br>B
</aside>
<footer id="footer" class="box">Footer</footer>