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

Question

几年后回到webdev,学习这个CSS网格业务,但也消除了被遗忘的知识; 如果存在,请承担愚蠢.

这是一个目标的模型:

我正在构建一个简单的CMS界面,应该向右扩展以填充浏览器屏幕; 除了第 1列之外,我当前的代码导致外部网格的第2列与浏览器一样宽; 或者也许其中一个孩子正在造成这种情况,它只是在扩大以适应.无论哪种方式,它都会横向溢出页面

所以代码:

#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

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

1. 删除代码中的层次结构，并为网格中的每个部分添加一个元素。

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

3. 使用跨越两行的第一列grid-row: span 2

4. 跨越所述第一行中的第二列中，通过使用grid-column: span 2。

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>

Answer 2

将100%在您的第2列grid-template-columns是基于容器的宽度-而不是占据容器内的空间优秀，它会推送到正确的，因为第二列是试图以匹配容器的宽度。

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

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