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（消耗剩余空间）。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

虽然我不确定如何让第二个盒子跳起来与第一个盒子匹配Grid格式，但如果您愿意使用 {，那么实现所需效果将非常简单{3}}

只需将display: flex添加到.grid，然后创建一个新.right以包含.top_right和.bottom_right。然后选择flex: 1同时.left和.right：

＆＃13;
＆＃13;
.grid { display: flex; } .left { flex: 1; } .right { flex: 1; background: #c7ffae; } .top_right { background: #ffa4a4; height: fit-content; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

请注意，您还需要将绿色background从.bottom_right移至.right，以便拉伸整个高度。

这将有效flexbox。

希望这有帮助！：）

设置行高以适合CSS Grid中的内容高度

2 个答案: