使用flexbox（或其他CSS）创build砌体网格

我想在CSS中实现一个网格效果，所有的元素都具有相同的宽度但不是高度。 我希望下面的元素永远在底部的50px处，而不pipe下一个是什么。

我尝试了花车，但那个错误。 所以我尝试使用Flex，但它仍然没有做我想要的。

.container display: flex flex-wrap wrap align-content flex-start align-items flex-start 

我想要什么：

我拥有的：

Answer 1

我build议你把每一栏放在一个单独的div 。 这种方式flexbox不强制它成一个类似于表格的布局。

尽pipe我在代码片段中使用了固定的高度，但它应该可以dynamic地工作，没有任何问题

 .container { display: flex; } .col { flex: 1; } .col div { background-color: #2C2F33; margin: 16px 8px; } 

 <div class="container"> <div class="col"> <div style="height: 200px"></div> <div style="height: 100px"></div> <div style="height: 200px"></div> </div> <div class="col"> <div style="height: 150px"></div> <div style="height: 250px"></div> <div style="height: 200px"></div> </div> <div class="col"> <div style="height: 300px"></div> <div style="height: 150px"></div> <div style="height: 100px"></div> </div> </div> 

Answer 2

尝试新的CSS网格布局 ：

 grid-container { display: grid; /* 1 */ grid-auto-rows: 50px; /* 2 */ grid-gap: 10px; /* 3 */ grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */ } [short] { grid-row: span 1; /* 5 */ background-color: green; } [tall] { grid-row: span 2; background-color: crimson; } [taller] { grid-row: span 3; background-color: blue; } [tallest] { grid-row: span 4; background-color: gray; } 

 <grid-container> <grid-item short></grid-item> <grid-item short></grid-item> <grid-item tall></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> <grid-item taller></grid-item> <grid-item short></grid-item> <grid-item tallest></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> <grid-item tallest></grid-item> <grid-item tall></grid-item> <grid-item taller></grid-item> <grid-item short></grid-item> <grid-item short></grid-item> <grid-item short></grid-item> <grid-item short></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> <grid-item taller></grid-item> <grid-item short></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> <grid-item short></grid-item> <grid-item tallest></grid-item> <grid-item taller></grid-item> <grid-item short></grid-item> <grid-item tallest></grid-item> <grid-item tall></grid-item> <grid-item short></grid-item> </grid-container> 

Answer 3

我会build议一个列布局。 通过声明column-width和column-count ，可以很容易地响应你的喜好。 Emonadeo的解决scheme（没有违法）的好处是，它仍然是响应，没有任何额外的标记增加。 缺点是，元素首先被sorting到列中，而不是行。

 .container { /* min width of a single column */ column-width: 140px; /* maximum amount of columns */ column-count: 4; /* gap between the columns */ column-gap: 16px; } .container div { /* important so a single div never gets distributed between columns */ break-inside: avoid-column; background-color: #2C2F33; margin-bottom: 16px; color:white; } 

 <div class="container"> <div style="height: 200px">a</div> <div style="height: 100px">b</div> <div style="height: 200px">c</div> <div style="height: 150px">d</div> <div style="height: 250px">e</div> <div style="height: 200px">f</div> <div style="height: 300px">g</div> <div style="height: 150px">h</div> <div style="height: 100px">i</div> </div>