Question

我的网格中有2列。所有项目的高度都不同，当一个单元格大于其旁边的单元格时，它们的大小相同。较小单元格的实际内容不会扩展或伸展，但是单元格会变大。这是一个示例：
我该如何预防？在这种情况下，我希望较小的（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>

Answer 1

这是一种实现方法：

<!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>

在2列中对齐具有不同高度的网格单元

1 个答案: