CSS 网格在一行中展开单列

Question

我有单行的 CSS 网格。其中一列的内容比其他列多，我想在不展开其他列的情况下垂直展开它。

我尝试过使用grid-template-rows: auto，但这会扩展所有列。我也尝试过使用display: flex 和flex-grow: 1，但没有成功。

我希望第二列比其他列长，但实际上它是相同的高度

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2rem;
  grid-template-areas: "first second third";
}

.item1 {
  grid-area: first;
  border-style: solid;
}

.item2 {
  grid-area: second;
  border-style: solid;
}

.item3 {
  grid-area: third;
  border-style: solid;
}

<span class="item1">item 1</span>
<span class="item2">item 2<br><br>expanded</span>
<span class="item3">item 3</span>

https://jsfiddle.net/679y4d0z/

Answer 1

同一行不能有不同的高度。

您将如何定位行的不同区域？它不起作用。

一行具有统一的高度。

但是，您可以连续调整网格项的高度。

因为网格项的默认高度是stretch（给它们行的完整高度），只需用align-items: start 覆盖该设置（使它们缩小以适应内容）。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
}

span {
  border-style: solid;
}

<span class="item1">item 1</span>
<span class="item2">item 2<br><br>expanded</span>
<span class="item3">item 3</span>

Answer 2

我建议研究 Bootstrap。我在 CSS 更改方面遇到了困难，但 Bootstrap 真的很有帮助！他们有一个网格系统，可以像您想要的那样轻松更改尺寸

https://getbootstrap.com/docs/4.0/layout/grid/