设置行高以适应 CSS 网格中的内容高度

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

您可以使用 height: fit-content 来确保元素与其中包含的内容的高度相匹配...但请注意，第二个框仍将保留其原始内容位置：

.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;
  height: fit-content;
}

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

虽然我不确定如何让第二个框跳起来以匹配第一个与网格布局，但如果您愿意使用 [，想要的效果将很容易实现=27=].

只需将 display: flex 添加到 .grid，并创建一个新的 .right 来包含 .top_right 和 .bottom_right。然后可选地 flex: 1 到 .left 和 .right:

.grid {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 1;
  background: #c7ffae;
}

.top_right {
  background: #ffa4a4;
  height: fit-content;
}

<div class="grid">
  <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="right">
    <div class="top_right">I'm top right</div>
    <div class="bottom_right">I'm bottom right</div>
  </div>
</div>

请注意，您还需要将绿色 background 从 .bottom_right 移动到 .right 以使其伸展整个高度。

这会起作用 across all major browsers。

希望这对您有所帮助！ :)

Answer 2

你只需要将第一行设置为auto（内容高度），将第二行设置为1fr（消耗剩余space）。

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

设置行高以适应 CSS 网格中的内容高度

Set row height to fit content height in CSS Grid

html

css

css-grid