扩展以填充CSS网格布局中的剩余空间

Question

几年后重返webdev，不仅学习CSS网格业务，而且还积累了被遗忘的知识；如果有的话要忍受愚蠢。

这是目标的模型：

我正在构建一个简单的CMS界面，该界面应向右扩展以填充浏览器屏幕；我当前的代码使外部网格的第2列与第1列之外的浏览器 一样宽；也许是其中一个孩子导致了这个问题，并且只是为了适应而扩大。无论哪种方式，它都是水平溢出页面

代码如下：

#main {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 100%;
  grid-template-rows: 100px 100%;
}

#col-2-outer {
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 100%;
}

#row-1-inner {
  grid-column: span 2;
}

#col-2-inner table {
  width: 100%;
}

<div id="main">
  <div id="col-1-outer"></div>
  <div id="col-2-outer">
    <div id="row-1-inner"></div>
    <div id="row-2-inner">
      <div id="col-1-inner"></div>
      <div id="col-2-inner">
        <table></table>
      </div>
    </div>
  </div>
</div>

仅供参考，暂时我已经放弃了模板区域，直到掌握了基础知识为止（除非这能以某种方式解决我的问题，但我认为这完全是代码组织功能？）。

Answer 1

100%中第二列的grid-template-columns是基于容器的宽度-而不是占据容器中未占用的空间，它会向右推出，因为第二列正在尝试匹配容器的宽度。

尝试将其更改为auto，这应该可以解决此问题，因为它只会占用直到容器末端的空间，而不会占用更多空间。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

Answer 2

我建议使用3x2网格更改您的标记，如下所示：

1. 删除代码中的 hierarchical 结构，并为 grid 中的每个部分添加 one 元素。

2. 请注意，在规则grid-template-columns: 250px 150px auto中，col-1-outer的宽度为250px，col-1-inner的宽度为150px。

通过使用grid-row: span 2
在两行中

3. Span 第一个列 通过使用grid-column: span 2，

4. 跨度第二个列中的第一个行。

5. 通过使用100％的宽度和高度将table扩展到最后一个网格项。

请参见下面的演示

* {
  border: 1px solid; /* For illustration */
}

#main {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 150px auto;
  grid-template-rows: 100px auto;
}

#col-1-outer {
  grid-row: span 2;
}

#row-1-inner {
  grid-column: span 2;
}

#col-2-inner table {
  width: 100%;
  height: 100%;
}

<div id="main">
  <div id="col-1-outer">col-1-outer</div>
  <div id="row-1-inner">col2-row-1-inner</div>
  <div id="col-1-inner">col2-row2-inner</div>
  <div id="col-2-inner">
    <table><tr><td>table</td></tr></table>
  </div>
</div>