带有CSS网格的两列报纸布局

Question

我有CSS网格来生成两列布局。但问题是，它并没有对每一列中的内容进行顶部对齐。

例如，在第二列中，最后一个元素应与另一列的第二个元素顶部对齐。

body>div {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto;
grid-auto-flow: column;
/* https://codepen.io/maddesigns/pen/oZGWRN */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}
body>div>div:nth-of-type(1) {
height: 300px;
}
body>div>div:nth-of-type(2) {
height: 100px;
}
body>div>div:nth-of-type(3) {
height: 200px;
}

<div style="">
<div style="background:red">
1
</div>
<div style="background:green;">
2
</div>
<div style="background:yellow">
3
</div>
<div style="background:pink">
4
</div>
</div>

我不能对这个布局使用flex，因为我想在不定义容器高度的情况下实现这个布局。column-count:2在没有定义容器高度的情况下会工作，但我不能使用div重新排序。

所以我使用CSS网格是因为div重新排序仍然可用(例如/即order:–1;工作得很好(，并且它会自动分配两列中的每一列。

Answer 1

网格完全按照预期运行，以保持秩序和对称性，就像这样。我可以建议使用两个并排的网格来实现你想要的。下面是我做的一个例子来证明这一点：

.left{
display: grid;
grid-template-rows: auto auto;
grid-auto-flow: column;
width: 50%;
float: left;
/* https://codepen.io/maddesigns/pen/oZGWRN */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}
.right{
display: grid;
grid-template-rows: auto auto;
grid-auto-flow: column;
width: 50%;
/* https://codepen.io/maddesigns/pen/oZGWRN */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}
.left>div:nth-of-type(1) {
height: 300px;
}
.left>div:nth-of-type(2) {
height: 100px;
}
.right>div:nth-of-type(1) {
height: 200px;
}
.right>div:nth-of-type(2) {
height: 50px;
}

<div class="left" style="">
<div style="background:red">
1
</div>
<div style="background:green;">
2
</div>
</div>

<div class="right">
<div style="background:yellow">
3
</div>
<div style="background:pink">
4
</div>
</div>

Answer 2

事实上，在CSS技术能够自动缩小差距之前，CSS通常没有解决方案。像这样的事情可能需要重新刷新文档，所以我不确定它有多有用或有多高效

来源：https://stackoverflow.com/a/45200955/1625909