网格项不会占据父容器的完整高度

Question

我正在尝试在嵌套网格项目内创建三个项目。正如您从代码中看到的，我将“panels”div 放在“jumbo”和“content”div 之间。我还在里面嵌套了三个div。在 CSS 中，我在.panels.

我希望“面板”div 在垂直轴上分成三个大小相等的部分。想象一下三个方块依次堆叠起来。但嵌套项目不会填充整个“面板”div。如果运行代码片段，您可以看到面板是嵌套的，但不占用整个空间。他们只占父母的一小部分。我添加background-color: white !important到其中一个嵌套面板以显示它有多小。

另一个例子可以在这里看到：https://codepen.io/rachelandrew/pen/NqQPBR/

但同样，嵌套的 E、F 和 G 项不会扩展以填满整个 D 部分。

有没有办法让三个面板填充其父面板？

.container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-gap: 3px;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}

.header {
    grid-column: 1 / -1;
}

.jumbo {
    grid-column: 1 / -1;
    grid-row: 2 / 5;
}

.panels {
    grid-column: 3 / 9;
    grid-row: 4 / 6;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.panel1 {
    grid-row: 1 / 2;
    grid-row: 1;
    background-color: white !important;
    z-index: 2;
}

.content {
    grid-column: 1 / -1;
    grid-row: 5 / 7;
}

.footer {
    grid-column: 1 / -1;
}

/* Styling */
.container > div {
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffeead;
}

html, body {
    background-color: #ffeead;
    box-sizing: border-box;
    height: 100%;
    margin: 0px;
    font-family: "Work Sans"
}

.container > div:nth-child(1n) {
    background-color: #96ceb4;
}

.container > div:nth-child(3n) {
    background-color: #88d8b0;
}

.container > div:nth-child(2n) {
    background-color: #ff6f69;
}

.container > div:nth-child(4n) {
    background-color: #ffcc5c;
}

.panels > div:nth-child(1n) {
    background-color: #96ceb4;
}

<div class="container">
    <div class="header">
        HEADER
    </div>
    <div class="jumbo">
        JUMBO
    </div>
    <div class="panels">
        <div class="panel1">PANEL1</div>
        <div class="panel2">PANEL2</div>
        <div class="panel3">PANEL3</div>
    </div>
    <div class="content">
        CONTENT
    </div>
    <div class="footer">
        FOOTER
    </div>
</div>

Answer 1

您已align-items: center应用于嵌套网格容器（.panels )。

使用该规则，您可以覆盖默认值align-items: stretch，这会将网格项设置为父项的完整高度。相反，您可以将项目垂直居中。

所以它们可以是全高，align-items: center从.panels元素中删除：

.container > div:not(.panels) {
   align-items: center;
}

.container > div:not(.panels) {
   align-items: center;
}

.container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-gap: 3px;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}

.header {
    grid-column: 1 / -1;
}

.jumbo {
    grid-column: 1 / -1;
    grid-row: 2 / 5;
}

.panels {
    grid-column: 3 / 9;
    grid-row: 4 / 6;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.panel1 {
    grid-row: 1 / 2;
    grid-row: 1;
    background-color: white !important;
    z-index: 2;
}

.content {
    grid-column: 1 / -1;
    grid-row: 5 / 7;
}

.footer {
    grid-column: 1 / -1;
}

/* Styling */
.container > div {
    display: grid;
    justify-content: center;
    /* align-items: center; */
    font-size: 2em;
    color: #ffeead;
}

/* new */
.container > div:not(.panels) {
  align-items: center;
}

html, body {
    background-color: #ffeead;
    box-sizing: border-box;
    height: 100%;
    margin: 0px;
    font-family: "Work Sans"
}

.container > div:nth-child(1n) { background-color: #96ceb4; }
.container > div:nth-child(3n) { background-color: #88d8b0; }
.container > div:nth-child(2n) { background-color: #ff6f69; }
.container > div:nth-child(4n) { background-color: #ffcc5c; }
.panels > div:nth-child(1n)    { background-color: #96ceb4; }

然后，为了使 的内容垂直居中.panels，我将直接定位内容：

.panels > div {
  display: flex;
  align-items: center;
}

<div class="container">
    <div class="header">HEADER</div>
    <div class="jumbo">JUMBO</div>
    <div class="panels">
        <div class="panel1">PANEL1</div>
        <div class="panel2">PANEL2</div>
        <div class="panel3">PANEL3</div>
    </div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</div>

.panels > div {
  display: flex;
  align-items: center;
}

请记住，网格容器中有三个结构级别：

• 容器
• 项目（容器的子项）
• 内容（项目的子项）

网格属性仅在父级和子级之间起作用。

因此，当您在容器上应用网格居中属性时，它们将应用于项目，而不是内容。要使内容居中，您需要将项目视为父项，将内容视为子项。

这里有对这些概念和方法的更深入的解释：Centering in CSS Grid

Answer 2

好吧，您所做的是，在“面板”div 中创建了三列：

grid-template-columns: repeat(3, 1fr);

但你只给孩子们一个该行的位置（两次）：

grid-row: 1 / 2;
grid-row: 1;

因此，如果您将“.panels”中的“列”更改为“行”并清理“.panel1”的代码，它应该像 cham 一样工作！