僅CSS的解決方案，在響應網格上設置“相同高度”的行部分

Question

想要的 ：僅CSS的解決方案，以在每行的基礎上啟用相等高度的網格“部分”，這也是響應性的。

這張圖有望比本文中的文字更好地解釋需求：

“項目網格”應該具有響應性-因為它可以根據視口寬度在每行中顯示不同數量的卡片。 在給定的行中，“每行”的等效部分應具有相同的高度。

在下面的HTML和CSS中-項目卡分為所需的行（在兩個示例斷點處為台式機和移動機），但內容部分的高度可變（糟糕）：

 .items { max-width: 1200px; } .item { width: 25%; box-sizing: border-box; display: inline-block; vertical-align: top; padding: 0 12px; margin: 24px -4px 24px 0; } @media (max-width: 600px) { .item { width: 50%; } } .item__heading { background-color: #d4d0f5; padding: 10px; text-align: center; border: 1px solid #bbbbbb; } .item__content { padding: 10px; border-left: 1px solid #bbbbbb; border-right: 1px solid #bbbbbb; } .item__price { background-color: #e0f6d9; padding: 10px; text-align: center; border: 1px solid #bbbbbb; } 

 <div class="items"> <div class="item"> <div class="item__heading"> Item 1 </div> <div class="item__content"> Some content that is not that long </div> <div class="item__price"> £99.99 </div> </div> <div class="item"> <div class="item__heading"> Item 2 </div> <div class="item__content"> Some content that is longer than other items on the same row and sets the height of this section </div> <div class="item__price"> £69.99 </div> </div> <div class="item"> <div class="item__heading"> Item 3 </div> <div class="item__content"> Some content that is not that long </div> <div class="item__price"> £69.99 </div> </div> <div class="item"> <div class="item__heading"> Item 4 </div> <div class="item__content"> Some content that is not that long </div> <div class="item__price"> £109.99 </div> </div> <div class="item"> <div class="item__heading"> Item 5 </div> <div class="item__content"> Some content that is a medium kind of length blah blah </div> <div class="item__price"> £29.99 </div> </div> <div class="item"> <div class="item__heading"> Item 6 </div> <div class="item__content"> Some content that is not that long </div> <div class="item__price"> £99.99 </div> </div> </div> 

以下代碼筆是基於JavaScript的解決方案，可實現所需的結果-但我正在嘗試避免這種情況： https : //codepen.io/rusta/pen/KmbVKd

限制

• 網格列表中要顯示的項目數可以是1-150中的任何數字
• 要顯示的項目內容的大小將是真正可變的（因此，不能選擇“明智的”最小高度）

我希望新的CSS Grid系統可以幫助我實現上述目標，但是玩了一段時間之后，它似乎需要的結構比我希望的要多一些，並且響應方面似乎頗具挑戰性。 但是也許某個地方有基於CSS Grid的答案

進一步說明：我說的是純CSS解決方案，我的意思是非JS解決方案。 如果需要更改HTML塊（順序/嵌套/類名稱）以支持非JS解決方案，那將是非常好的

在這個簡單的示例中，我們僅關注具有“高度匹配”的“內容”部分，因為我們可以假設標題和價格部分自然是相同的高度。 跨任何匹配的網格部分（標題/內容/價格/其他）啟用“等效性”將是很好的選擇，但這可以是另一天……

Answer 1

通過display: flex; flex-wrap: wrap; .items display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap; 您的item將變成彈性商品，並從左向右流動，並在沒有更多空間時自動包裹。

然后給.item display: flex; flex-direction: column; display: flex; flex-direction: column; ，這也將使它們成為flex容器，並且通過使用列方向，其子級將像塊元素一樣垂直流動。

最后，給.item__content flex: 1; ，這將使其在垂直方向上占據任何剩余空間，因此每一行的item都將具有相等的高度。

更新的代碼筆

堆棧片段

 .items { display: flex; flex-wrap: wrap; max-width: 1200px; } .item { display: flex; flex-direction: column; width: 25%; box-sizing: border-box; vertical-align: top; padding: 0 12px; margin: 24px -4px 24px 0; } @media (max-width: 600px) { .item { width: 50%; } } .item__heading { background-color: #d4d0f5; padding: 10px; text-align: center; border: 1px solid #bbbbbb; } .item__content { flex: 1 1 auto; /* IE need 1 1 auto */ padding: 10px; border-left: 1px solid #bbbbbb; border-right: 1px solid #bbbbbb; } .item__price { background-color: #e0f6d9; padding: 10px; text-align: center; border: 1px solid #bbbbbb; } 

 <div class="items"> <div class="item"> <div class="item__heading"> Item 1 </div> <div class="item__content"> Some content that is not that long </div> <div class="item__price"> £99.99 </div> </div> <div class="item"> <div class="item__heading"> Item 2 </div> <div class="item__content"> Some content that is longer than other items on the same row and sets the height of this section </div> <div class="item__price"> £69.99 </div> </div> <div class="item"> <div class="item__heading"> Item 3 </div> <div class="item__content"> Some content that is not that long </div> <div class="item__price"> £69.99 </div> </div> <div class="item"> <div class="item__heading"> Item 4 </div> <div class="item__content"> Some content that is not that long </div> <div class="item__price"> £109.99 </div> </div> <div class="item"> <div class="item__heading"> Item 5 </div> <div class="item__content"> Some content that is a medium kind of length blah blah </div> <div class="item__price"> £29.99 </div> </div> <div class="item"> <div class="item__heading"> Item 6 </div> <div class="item__content"> Some content that is not that long </div> <div class="item__price"> £99.99 </div> </div> </div>