一個具有相同高度的項目的響應網格（從3列開始，下降到2列，然后是1列）？

Question

例如，如果我想要一個每行3列的網格，並且還想確保行中的每個項目都具有相同的高度，而不必專門設置它（請考慮<table> ）...

例：

...我可以輕松地通過這樣的標記（如下）並使用帶有值table-row和table-cell CSS display屬性來實現此目的：

<div class="table-row">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>

對於兩列，這樣做：

<div class="table-row">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>

我的問題是：如何根據屏幕尺寸創建從3列縮小為2和1的響應網格，並確保行中的所有項目都具有相同的高度，而無需我設置具體來說（如<table> ）？

注意：使用什么CSS屬性或如何修改HTML標記並不重要。 如果您只有一個主意，請隨時在評論中分享，以便我進行嘗試並在可行的情況下分享答案。

PS： 我找不到能做到這一點的框架。 大多數比例從3縮放到1，或者即使它們執行3-2-1（使用float ），它們也不會保持行中項目的高度相同，這在我的設計中至關重要。

Answer 1

由flexbox解決。 我可以用嗎

 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { padding: 0; margin: 0; height: 100%; } body { background-color: #333; } .container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: distribute; -moz-box-pack: distribute; -o-box-pack: distribute; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; } .container__item { min-width: 200px; margin: 10px; background-color: #fff; max-width: 300px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .container__img { object-fit: cover; width: 100%; } .container__title, .container__content { opacity: 0.99; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)"; filter: alpha(opacity=99); } 

 <div class="container"> <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/> <div class="container__title">Title</div> <div class="container__content"> Lorem ipsum </div> </div> <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/> <div class="container__title">Title</div> <div class="container__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestias excepturi omnis expedita, aliquid laborum in est tempore velit qui aspe illum fugiat enim!</div> </div> <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/> <div class="container__title">Title</div> <div class="container__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestias excepturi omnis expedita, aliquid laborum in est tempore velit qui aspernatur consectetur consequatur soluta quis alias possimus illum fugiat enim!</div> </div> <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/> <div class="container__title">Title</div> <div class="container__content"> Lorem </div> </div> <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/> <div class="container__title">Title</div> <div class="container__content"> Lorem</div> </div> </div>