扩展到多个区域时 CSS Grid 不会扩展答案

【问题标题】：CSS Grid not expanding when extending to more than one area扩展到多个区域时 CSS Grid 不会扩展
【发布时间】：2022-12-13 05:37:11
【问题描述】：

我有一个 4x4 布局的 CSS 网格。 A、B、C 和 D 部分包含动态内容：每个部分都有一个按钮，用户可以单击该按钮以显示附加图像。完成后，我希望这些部分会变大。随着新内容的添加，A、C 和 D 将无限期延长。但是，B 部分仅向下延伸至（A、C、D）中最长的部分。如果我向 B 添加足够的内容使其成为最长的列，则 B 不会调整为更长的大小，而是额外的内容会溢出它的底部。 B 只会调整大小以匹配 A、C 或 D 的大小，因为它们超出了它。

在我的理想情况下，随着新内容被添加到 B，它会随着该内容继续增长。我能看到的唯一区别是 B 在我的网格上跨了两行，而 A、C 和 D 都被限制在一行中。

如何让B随着内容一起成长？

main {
  display: grid;
  width: 800px;
  height: 1460px;
  grid-gap: 4px;
  grid-template-columns: 240px 10px 240px 260px;
  grid-template-rows: 230px 300px 1fr 1fr;
  grid-template-areas:"header header  header  header"
                      "  .      .       .     avatar"
                      "  A      A       A      B"
                      "  C      .       D      B"
}

【问题讨论】：

请发布足够的代码来重现问题。谢谢。

标签： css css-grid

【解决方案1】：

到目前为止，我所做的是将 B 的 min-height 属性设置为其起始默认值，并设置 height: fit-content。这解决了我的问题，但感觉应该有更好的方法。

【讨论】：

【解决方案2】：

尝试使用具有固定值的 grid-auto-rows。默认情况下它设置为“自动”，但是您可以通过包含以下代码来更改它：

main {
  display: grid;
  width: 800px;
  height: 1460px;
  grid-gap: 4px;
  grid-template-columns: 240px 10px 240px 260px;
  grid-template-rows: 230px 300px 1fr 1fr;
  grid-template-areas: "header header  header  header"
                       "  .      .       .     avatar"
                       "  A      A       A      B"
                       "  C      .       D      B";
  grid-auto-rows: 200px;
}

【讨论】：

感谢您的建议！不幸的是，这并没有改变我的行为。