如何在列方向的所有柔性物品上均匀拉伸高度？

Question

我有.item个flex-direction: column项目，我希望每个子项目（.item__title，.item__description）取决于最高的空间。所以下一个项目以相同的新行开头。我＆＃39;尝试以下代码：

<article class="items">
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2>
    <p class="item__description">Lorem ipsum dolor sit amet.</p>
    <a class="item__more-button">See more</a>
</section>
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet</h2>
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <a class="item__more-button">See more</a>
</section>
<section class="item">
    <h2 class="item__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt</h2>
    <p class="item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.</p>
    <a class="item__more-button">See more</a>
</section>
</article>


  .items {
  display: flex;
  }

  .item {
  margin: 0 15px;
  width: calc((100% - 2 * 15px) / 3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  }



  .item__title {
      flex: 1;
  }

  .item__description {
      flex: 1;
  }

但我希望它看起来像这张照片：

如果没有设定高度，我怎么能这样做？

Answer 1

只需添加justify-content：space-between;到你的项目班， 你的部分已经有相同的高度

Greeting

  .items {
  display: flex;
  }

  .item {
  margin: 0 15px;
  width: calc((100% - 2 * 15px) / 3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

}
.item.__title{
flex:1;
}
.item.__description {
      flex: 1;
  }

Answer 2

尝试将grid-auto-rows: 1fr与display:grid一起用于父节，并且不要忘记将子节的宽度设置为100％。否则它不会给你你想要的东西。

工作jsfiddle演示：https://jsfiddle.net/e63k17na/

<强>更新

在查看屏幕截图后，我相信您需要这样的内容：https://jsfiddle.net/e63k17na/1/

只需将相同的逻辑应用于子类，在本例中为“item”。

.items{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; 
    text-align:center;
  }

.item{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 1fr;
}