<分区>
css - 将 CSS 网格行分成相等的大小
标签 css
如何将具有 3 列的 CSS 网格行分成 2 个相等的大小？这是我的 fiddle :
https://jsfiddle.net/251f04ts/3/
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: 50px;
}
.one {
background-color: yellow;
}
.two {
background-color: blue;
}
.three {
background-color: purple;
}
.four {
background-color: green;
grid-column: 1/4;
}
.five {
background-color: pink;
grid-column: 1/3;
}
.six {
background-color: gray;
grid-column: 2/5;
}<div class="wrapper">
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
<div class="four">
four
</div>
<div class="five">
five - this and six should be equal
</div>
<div class="six">
six
</div>
</div> 
最佳答案
将 .wrapper_the_second 放入您想要 .five 和 .six 的行中。
.wrapper_the_second{
grid-column: 1/4;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
grid-auto-rows: 50px;
}
然后
.five {
background-color: pink;
}
.six {
background-color: gray;
}
这应该可以完成工作。
Jfiddle:https://jsfiddle.net/9e1naudg/
关于css - 将 CSS 网格行分成相等的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58977119/