html - 设置行高以适应 CSS Grid 中的内容高度

Question

我有一个包含两列和两行的网格。我必须在一列(右侧)中放置两个网格元素，在左侧放置一个元素。然后我希望右列中的第一个元素的最大高度等于其内容高度。我怎样才能做到这一点？

我现在面临的问题是右边的这两个元素有 50% 的高度，我找不到办法将第一个设置为最小可能高度，另一个设置为其余高度高度(自动)。

澄清一下 - 每个元素的高度不固定。您可以在下面看到它现在的样子。

还有一件事，由于响应式网页设计，我无法更改 HTML DIV 元素的顺序。

.grid{
  display: grid;
  grid-template-columns: auto 300px;
  grid-column-gap: 20px;
  grid-template-areas: "main_content top" "main_content bottom";
}

.left{
  grid-area: main_content;
}

.top_right{
  grid-area: top;
  background: #ffa4a4;
}

.bottom_right{
  grid-area: bottom;
  background: #c7ffae;
}

<div class="grid">
  <div class="top_right">I'm top right</div>
  <div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
  <div class="bottom_right">I'm bottom right</div>
</div>

Answer 1

您只需将第一行设置为auto(内容高度)，将第二行设置为1fr(消耗剩余空间)。

.grid{
  display: grid;
  grid-template-rows: auto 1fr; /* NEW */
  grid-template-columns: auto 300px;
  grid-column-gap: 20px;
  grid-template-areas: "main_content top" "main_content bottom";
}

.left{
  grid-area: main_content;
}

.top_right{
  grid-area: top;
  background: #ffa4a4;
}

.bottom_right{
  grid-area: bottom;
  background: #c7ffae;
}

<div class="grid">
  <div class="top_right">I'm top right</div>
  <div class="left">Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. </div>
  <div class="bottom_right">I'm bottom right</div>
</div>