对齐不同块的子元素

目前（2019/06）*使用任何CSS布局方法均无法实现。

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 >  Title:1  <br/>Title:2  <br/>Title:3  <br/>Title:4</div><div >  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.</div><div >12.00$</div><button>buy</button>

  <img src="http://www.fillmurray.com/300/200"><div >  Title:1  <br/>Title:2  <br/>Title:3  <br/>Title:4  <br/>Title:5  <br/>Title:6</div><div >  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 >12.00$</div><button>buy</button>

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

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