对齐不同块的子元素

Question

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

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

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

Answer 1

可以说，即使没有subgrid，您也可以实现相同的目的，尽管这有点麻烦。

在我的示例中，我没有更改HTML，所以我使用display: contents来将子级提升到DOM树的一级。但是，如果您可以更改标记并且不介意由此带来的混乱，那么也可以在没有display: contents的情况下实现这一目标。

.Grid {
    display: grid;
    grid-gap: 10px;
}
.loon-card {
    display: contents;
}
img {
    width: 100%;
    grid-row-start: 1;
}
.short-description {
    grid-row-start: 2;
}
.long-description {
    grid-row-start: 3;
}
.price {
    grid-row-start: 4;
}
button {
    grid-row-start: 5;
}

<div class="Grid">

	<div class="loon-card">
		<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>
	</div>

	<div class="loon-card">
		<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>
	</div>

	<div class="loon-card">
		<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>
	</div>

	<div class="loon-card">
		<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>
	</div>
</div>

Answer 2

当前（2019/06）使用任何CSS布局方法均无法实现。 display:subgrid可以解决问题，但浏览器非实验性采用率为零。

默认情况下，它已在Firefox Nightly中启用，因此可以进行测试。在完全采用此方法之前，需要 Javacript 来均衡元素高度。

Rachel Andrew（CSS-Grid传播者）的一些资源链接

1. https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos/

和

1. YouTube video on subgrid

* {   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;
}

<div class="Grid">

  <div class="loon-card">
    <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>
  </div>

  <div class="loon-card">
    <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>
  </div>

  <div class="loon-card">
    <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>
  </div>

  <div class="loon-card">
    <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>
  </div>

</div>

结果输出（每晚FF）