对齐不同块的子元素

Question

我有商品清单。我需要在二维列表中显示它们。每个商品都有子元素：照片，标题，描述，价格和购买按钮，其大小和位置必须采用这种方式：商品行中的所有标题，描述，价格和照片必须位于相同的y坐标位置并具有高度，它是一行中相应的高度元素的最大值。

我已经尝试过：“ grid-template-rows：1fr 1fr 1fr 1fr 30px；” 使所有子元素都位于同一y位置，但是我需要它们的高度以适合内容，并且不能高于一行中的最大元素。PS：您可以使用flex或任何您想提供的代码。

CODE

.Grid {

  display: grid;

  grid-gap: 10px;

  grid-template-columns: repeat( auto-fill, 280px);

}



.loon-card {

  grid-template-rows: 1fr 1fr 1fr 1fr 30px;

  display: grid;

  grid-gap: 10px;

  border: 1px solid #ddd;

  padding: 10px;

}



.long-description {

  border-top: 1px solid #ddd;

}


<div class="Grid">



  <div class="loon-card">

    <img src="">

    <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 class='price'>12.00$</div>

    <button>buy</button>

  </div>



  <div class="loon-card">

    <img src="">

    <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

      <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.

    </div>

    <div class='price'>12.00$</div>

    <button>buy</button>

  </div>



  <div class="loon-card">

    <img src="">

    <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 class='price'>14.00$</div>

    <button>buy</button>

  </div>



  <div class="loon-card">

    <img src="">

    <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 class='price'>15.00$</div>

    <button>buy</button>

  </div>



</div>

Answer 1

目前（2019/06）*使用任何CSS布局html" target="_blank">方法均无法实现。

display:subgrid解决了这个问题，但到目前为止，浏览器的非实验性应用还很有限。*

• [2019/12更新]-Firefox 71现在提供了Subgrid。默认情况下，它在Firefox 71+中处于启用状态，因此可以进行测试。在完全采用之前，需要Javacript来平衡元素高度。

  • { margin: 0; padding: 0; box-sizing: border-box; } ::before, ::after { box-sizing:inherit; }

  .Grid {

  display: grid;

  width:90%;

  margin:auto;

  grid-gap: 10px;

  grid-template-columns: repeat( auto-fill, 280px);

  }

  .loon-card {

  display:grid;

  grid-row: span 5; / as we have 5 card components in each card /

  grid-template-rows:subgrid;

  border: 1px solid #ddd;

  padding: 10px;

  }

  .long-description {

  border-top: 1px solid #ddd;

  }

  .price {

  padding:.5em;

  text-align:center;

  }

  img {

  max-width:100%;

  display: block;

  }

  <img src="http://www.fillmurray.com/300/200">
  
  <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 class='price'>12.00$</div>
  
  <button>buy</button>
  

  <img src="http://www.fillmurray.com/300/200">
  
  <div class="short-description">
  
    Title:1
  
    <br/>Title:2
  
    <br/>Title:3
  
    <br/>Title:4
  
    <br/>Title:5
  
    <br/>Title:6
  
  </div>
  
  <div class="long-description">
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
  
  </div>
  
  <div class='price'>12.00$</div>
  
  <button>buy</button>
  

  <img src="http://www.fillmurray.com/300/200">
  
  <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 class='price'>14.00$</div>
  
  <button>buy</button>
  

  <img src="http://www.fillmurray.com/300/200">
  
  <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 class='price'>15.00$</div>
  
  <button>buy</button>