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

Question

我正在尝试在嵌套网格项中创建三个项目。正如您从代码中看到的那样，我已经将这些＆＃39;面板＆＃39;介于“jumbo”之间和＆＃39;内容＆＃39; div的。我还在里面嵌套了三个div。在CSS中，我在.panels内添加了一个嵌套网格。

我想要＆＃39;面板＆＃39; div在垂直轴上分成三个相同大小的部分。想象一下，三个方块一个接一个堆叠。但是嵌套的项目并没有填满整个“面板”。 DIV。如果您运行代码段，则可以看到面板嵌套但不占用整个空间。他们占父母的一小部分。我将background-color: white !important添加到其中一个嵌套面板中，以显示它有多小。

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

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

有没有办法让三个面板填充他们的父母？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

嗯，你所做的是，你在'panels'div内创建了三列：

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

但是你给了孩子一个位置（两次）：

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

因此，如果您在'.panels'中将'columns'更改为'rows'并清理'.panel1'的代码，那么它应该像cham一样工作！

Answer 2

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

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

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

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

＆＃13;

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

.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;
}

/* new */
.panels > div {
  display: flex;
  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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

网格属性仅适用于父级和子级。

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

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

Answer 3

谢谢大家的建议。我通过删除嵌套的“面板”并仅创建三个不同的面板来填充相同的空间来解决了该问题。

.container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-gap: 3px;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: 50px 218px 218px 200px 80px 530px 40px;
}

.header {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 3;
}

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

.panel1 {
    background-color: white !important;
    z-index: 1;
    grid-column: 3 / 6;
    grid-row: 4 / 6;
}

.panel2 {
    background-color: black !important;
    z-index: 1;
    grid-column: 6 / 9;
    grid-row: 4 / 6;
}

.panel3 {
    background-color: purple !important;
    z-index: 2;
    grid-column: 9 / 12;
    grid-row: 4 / 6;
}

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

.content-right {
    grid-column: 5 / -1;
    grid-row: 5 / 7;
    display: grid;
    grid-gap: 5px;
    align-items: start;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr)
}

.content-right > div {
    background-color: white;
    z-index: 2;
}

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

.container > div {
    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="panel1">PANEL1</div>
    <div class="panel2">PANEL2</div>
    <div class="panel3">PANEL3</div>
    <div class="content-left">
        CONTENT-LEFT
    </div>
    <div class="content-right">
        <div class="content-right1">1</div>
        <div class="content-right2">2</div>
        <div class="content-right3">3</div>
        <div class="content-right4">4</div>
        <div class="content-right5">5</div>
        <div class="content-right6">6</div>
    </div>
    <div class="footer">
        FOOTER
    </div>
</div>