所以我刚开始尝试网格显示，但出于某种原因，我使用了这个基本的代码。
div{
padding: 50px;
margin: 10px;
border: 5px solid black;
}
.grid{
display: grid;
grid-template-columns: auto auto auto;
}
.grid-header{grid-column: 1 / span 3;}
.grid-main{grid-column: 1 / span 2;}
结果我一直都是这样。
结果
但我想要的是它看起来像这个
预期
如果有帮助的话，下面是完整的代码。
<html>
<head>
<style>
div {
padding: 50px;
margin: 10px;
border: 5px solid black;
}
.grid {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-header {
grid-column: 1 / span 3;
}
.grid-main {
grid-column: 1 / span 2;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-header"></div>
<div></div>
<div class="grid-main"></div>
<div class="grid-main"></div>
<div></div>
</div>
</body>
</html>我已将一个div的类grid-main更改为grid-main2。如果遇到任何问题，请告诉我
<html>
<head>
<style>
div {
padding: 50px;
margin: 10px;
border: 5px solid black;
}
.grid {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-header {
grid-column: 1 / span 3;
}
.grid-main {
grid-column: 2 / span 2;
}
.grid-main2 {
grid-column: 1 / span 2;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-header"></div>
<div></div>
<div class="grid-main"></div>
<div class="grid-main2"></div>
<div></div>
</div>
</body>
</html>在不更改class的情况下，您可以使用现有的html再提供一个解决方案。这是css：
div {
padding: 50px;
margin: 10px;
border: 5px solid black;
}
.grid {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-header {
grid-column: 1 / span 3;
}
.grid-main:nth-child(3) {
grid-column: 2 / span 2;
}
.grid-main:nth-child(4) {
grid-column: 1 / span 2;
}