CSS唯一的解决方案来设置“相同的高度”行响应网格上的部分 [英] CSS only solution to set "same height" row sections on a responsive grid

问题描述

：仅用于CSS的解决方案可以在每行的基础上启用等高网格节这个图有希望解释的要求比这篇文章中的话要更好：

在下面的HTML& CSS - 项目卡被分割成我们需要的行（在两个例子中断点桌面和移动设备上），但是内容段的高度是可变的（yuck）：

<

  .items {max-width：1200px;}。item {width：25％;盒子尺寸：边框;显示：内联块; vertical-align：top; padding：0 12px; margin：24px -4px 24px 0;} @ media（max-width：600px）{.item {width：50％; item__heading {background-color：＃d4d0f5;}}填充：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;填充：10px; text-align：center; border：1px solid #bbbbbb;}  

< div class = 项 > < div class =item> < div class =item__heading>第1项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__price> £99.99< / div> < / DIV> < div class =item> < div class =item__heading>第2项< / div> < div class =item__content>某些内容比同一行中的其他内容长，并设置此部分的高度< / div> < div class =item__price> £69.99< / div> < / DIV> < div class =item> < div class =item__heading>第3项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__price> £69.99< / div> < / DIV> < div class =item> < div class =item__heading>第4项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__price> £109.99< / div> < / DIV> < div class =item> < div class =item__heading>第5项< / div> < div class =item__content>一些中等长度的内容等等< / div> < div class =item__price> £29.99< / div> < / DIV> < div class =item> < div class =item__heading>第6项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__price> £99.99< / div> < / DIV>下面的codepen是一个基于JavaScript的解决方案。

但是我正在试图避免：
https ：//codepen.io/rusta/pen/KmbVKd

限制

• 要显示在网格列表中的项目数量可以是1-150之间的任何数字。
  
• 要显示的项目内容的大小将是真正可变的一个明智的最小高度是不是一个选项）

我希望新的CSS网格系统将帮助我实现上述但是已经玩了一段时间，似乎需要比我所期望的更多的结构，而且响应方面似乎相当具有挑战性。但也许有一个基于CSS网格的答案在那里

进一步注意：我说一个CSS唯一的解决方案，我的意思是一个非JS的解决方案。如果HTML块需要改变（顺序/嵌套/类名）来支持非JS解决方案，那么这个解决方案是绝对没有问题的。在内容部分有匹配高度 - 我们可以假设标题和价格部分自然是相同的高度。在任何匹配的网格部分（标题/内容/价格/其他）上启用等同性将是很好的，但是可以在另一天进行。

解决通过给 .items 显示：flex; flex-wrap：wrap; 您的 item 将变为flex项目并从左向右流动，并在没有更多空间时进行换行。 >

然后给出 .item display：flex; flex-direction：column; ，这将使它们成为一个弹性容器，并且通过使用列方向，它的子元素将垂直流动，就像块元素一样。

最后给出 .item__content flex：1; ，这将使剩余空间，因此每一行的项目将具有相同的高度。

更新了codepen

堆栈片段

  .items {display：flex; flex-wrap：wrap; max-width：1200px;}。item {display：flex; flex-direction：column;宽度：25％;盒子尺寸：边框; vertical-align：top; padding：0 12px; margin：24px -4px 24px 0;} @ media（max-width：600px）{.item {width：50％; item__heading {background-color：＃d4d0f5;}}填充：10px; text-align：center; border：1px solid #bbbbbb;}。item__content {flex：1 1 auto; / * IE需要1 1 auto * / padding：10px; border-left：1px solid #bbbbbb; border-right：1px solid #bbbbbb;}。item__price {background-color：＃e0f6d9;填充：10px; text-align：center; border：1px solid #bbbbbb;}  

< div class = 项 > < div class =item> < div class =item__heading>第1项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__price> £99.99< / div> < / DIV> < div class =item> < div class =item__heading>第2项< / div> < div class =item__content>某些内容比同一行中的其他内容长，并设置此部分的高度< / div> < div class =item__price> £69.99< / div> < / DIV> < div class =item> < div class =item__heading>第3项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__price> £69.99< / div> < / DIV> < div class =item> < div class =item__heading>第4项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__price> £109.99< / div> < / DIV> < div class =item> < div class =item__heading>第5项< / div> < div class =item__content>一些中等长度的内容等等< / div> < div class =item__price> £29.99< / div> < / DIV> < div class =item> < div class =item__heading>第6项< / div> < div class =item__content>一些不那么长的内容< / div> < div class =item__price> £99.99< / div> < / div>< / div>

Wanted: a CSS only solution to enable equal height grid "sections" on a per row basis, that is also responsive.

This diagram hopefully explains the requirement better than the words in this post will:

The "item grid" should be responsive - in that it can show a different number of cards per row based on viewport width. And within a given row, the equivalent sections should have the same height on a "per row" basis.

In the below HTML & CSS - the item cards are split in to the rows that we need (at the two example break points desktop & mobile) but the content section heights are variable (yuck):

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

The following codepen is a JavaScript based solution that achieves the desired outcome - but is what I am trying to avoid: https://codepen.io/rusta/pen/KmbVKd

Limitations

• The number of items to be displayed in the grid list can be any number from 1-150
• The size of the item content to be displayed will be genuinely variable (so picking a "sensible" min-height is not an option)

I was hoping that the new CSS Grid system would help me achieve the above, but having played with it for a while it seems to need a bit more structure than I had hoped it would, and the responsive aspect seemed rather challenging. But maybe there is a CSS Grid based answer out there somewhere

Further note: I say a CSS only solution, by which I mean a non-JS solution. If the HTML blocks need to change (order/nesting/class names) to support a non-JS solution that is absolutely fine

In this trivial example - we are only focusing on the "content" section for having "matching heights" - as we can assume the heading and price sections will naturally be the same height. It would be nice to enable "equivalency" across any matching grid section (header/content/price/other) but that can be for another day...

解决方案

By giving the .items display: flex; flex-wrap: wrap; your item will become flex items and flow from left to right and wrap when there is no more space.

Then you give the .item display: flex; flex-direction: column;, which will make them a flex container as well, and by using column direction, its children will flow vertically, like block elements.

Finally you give the .item__content flex: 1;, which will make it take any remaining space, vertically, hence every row's item will have equal height.

Updated codepen

Stack snippet

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

这篇关于CSS唯一的解决方案来设置“相同的高度”行响应网格上的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！