<分区>
<分区>
我的网格中有 2 列。所有元素都有不同的高度，当一个单元格比旁边的单元格大时，它们的大小相同。较小单元格的实际内容不会扩展或拉伸(stretch)，但单元格会变大。这是一个例子:
我怎样才能防止这种情况发生？在这种情况下，我希望较小的(div one)单元格只获得它需要的大小，这样 div 3 就可以上升并且不会在它们之间留下巨大的差距。
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
background-color: #fff4e6;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.wrapper > div {
border: 2px solid #ffa94d;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.one {
height: 150px;
}
.two {
height: 200px;
}
<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</div>
<div class="six">Six</div>
<div class="seven">Seven</div>
<div class="eight">Eight</div>
</div>
最佳答案
这是一种方法:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div {
width: 630px;
background-color: #F0F0F0
}
div {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
</style>
</head>
<body>
<div>
<article style="height:100px; background:blue"></article>
<article style="height:200px;background:green"></article>
<article style="height:300px;background:red"></article>
<article style="height:200px;background:purple"></article>
<article style="height:200px;background:black"></article>
<article style="height:100px;background:orange"></article>
</div>
</body>
</html>
关于css - 在 2 列中对齐具有不同高度的网格单元，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53447935/