对齐不同块CSS的子块的高度（flex/grid）

Question

大家好！我有个问题。我想做与the picture(CLICK and LOOK!!!) 上相同的标记，问题是：同一级别的卡片的顶部和底部之间的灰线应该对齐。正如您在图片中看到的，第一张卡片的轨迹灰线较低，因为第二张图片上的文字较大。而在第二张卡片的轨道上，灰线较高，因为没有溢出的文本。我们可以使用 flex 和 grid。

<div class="cat-cards">
        <div class="cat-card">
            <img src="">
            <div class="short-description">
                short
            </div>
            <div class="long-description">
                long
            </div>
        </div>
        <div class="cat-card"></div>
        <div class="cat-card"></div>
    </div>

我想象的base应该是这样的，但是你可以写任何使用grid和flex的建议

.cat-cards
{
    display: flex;
}

.cat-card
{
    display: grid;
    grid-template-areas: 'image' 'short'
                     'long' 'long';
   }

.cat-card img
{
    grid-area: image;
}

.cat-card .short-description
{
    grid-area: short;
}

.cat-card .long-description
{
    grid-area: long;
}

Answer 1

如果我正确解释了您的请求，我相信如果一行的内容高度增加，您希望所有行均等扩展。

示例

.Grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr
}

.cat-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
}

.cat-card img {  
  max-width: 200px;
}

.long-description{
  grid-column: 1 / 3;
  border-top:1px solid #ddd;
}

<div class="Grid">

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
      <br/>Title:5
      <br/>Title:6
      <br/>Title:7
      <br/>Title:8
      <br/>Title:9
      <br/>Title:10
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

  <div class="cat-card">
    <img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350">
    <div class="short-description">
      Title:1
      <br/>Title:2
      <br/>Title:3
      <br/>Title:4
    </div>
    <div class="long-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. 
    </div>
  </div>

</div>

Answer 2

您的父容器应始终包含display:flex; 语句。这将确保任何孩子也能得到应用。 在包装器内对您的孩子使用 inline flex 参数，并在两者上应用类似于 flex:50% 的内容应该可以解决问题。

您可以在下面找到更多资源，我也会在为您完成工作后编辑代码。

http://flexboxgrid.com/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/