展开位于父 CSS 网格内的内部 CSS 网格答案

【问题标题】：Expand inner CSS grid that is inside parent CSS grid展开位于父 CSS 网格内的内部 CSS 网格
【发布时间】：2019-08-26 17:31:36
【问题描述】：

如何扩展最里面的网格以向右占用更多空间。我希望它与左侧的宽度相同。最里面的 div 的右侧有一个很大的间隙。整个项目可以在这个codepen看到：https://codepen.io/centem/pen/oNvZLgP?editors=1100

CSS

.inner-header {
    background-color: #96ceb4;  
}

.header :nth-child(2) {
    padding: 0 40px;
}

.inner-menu {
    background-color: #ff6f69;
}

.inner-content {
    background-color: #ffcc5c;
}

.inner-footer {
    background-color: #88d8b0;
}

.inner-grid-page > div {
    color: #ffeead;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

.inner-grid-page {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 20px 150px 20px;
}

.inner-header {
  grid-column: span 12;
  display: flex;
}

.inner-header > div:nth-child(3) {
  margin-left: auto;
}

.inner-menu {
    grid-column: span 2;
}

.inner-content {
    grid-column: span 10;
}

.inner-footer {
    grid-column: span 12;
}

【问题讨论】：

标签： css

【解决方案1】：

我们可以添加width: 100% -:

.inner-grid-page {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 20px 150px 20px;
}

【讨论】：

当我看到你的回答时，我只是删除了我的 :)

【解决方案2】：

对于flex里面的item，如果你想让它占用空间设置flex-grow: 1或者flex: 1

.inner-grid-page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 20px 150px 20px;
  flex: 1;
}

【讨论】：