Grid item won't take full height of parent container

Question

I am trying to create three items inside of a nested grid item. As you can see from the code, I've put the 'panels' div in-between the 'jumbo' and 'content' divs. I also nested three divs inside. In the CSS, I added a nested grid inside of .panels.

I want the 'panels' div to be split in three equally size parts on the vertical axis. Imagine three square blocks stack one after another. But the nested items don't fill the entire 'panels' div. If you run the code snippet, you can see that the panels are nested but don't take up the entire space. They take up a small percentage of their parent. I added background-color: white !important to one of the nested panels to show how small it is.

Another example can be seen here: https://codepen.io/rachelandrew/pen/NqQPBR/

But again, the nested E, F and G items don't expand to fill up the entire D section.

Is there a way to make the three panels fill in their parent?

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

Michael Benjamin · Accepted Answer · 2018-06-18 21:48:35Z

You have align-items: center applied to the nested grid container (.panels).

With that rule, you override the default align-items: stretch, which would set your grid items to the full height of the parent. Instead, you have the items vertically centered.

So they can be full height, remove align-items: center from the .panels element:

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

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

Then, to vertically center the content of .panels, I would target the content directly:

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

/* 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; }

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

Keep in mind that there are three structural levels in a grid container:

the container
the item (child of the container)
the content (child of the item)

Grid properties only work between parent and child.

So when you apply grid centering properties on the container, they apply to the item, not the content. To center the content, you need to treat the item as parent and content as child.

There's a more in-depth explanation of these concepts and methods here: Centering in CSS Grid

Melvin Idema · Accepted Answer · 2018-06-17 06:33:53Z

2

Well, what you have done is, you created three columns inside the 'panels' div:

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

But you gave the children only a position for the row (twice):

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

So if you change 'columns' to 'rows' in '.panels' and clean up the code for '.panel1' it should work like a cham!

edited Jun 17, 2018 at 6:33

answered Jun 17, 2018 at 6:26

Melvin Idema

5611 bronze badges

You're right, I shouldn't have declared the rows twice. My mistake. I put that in later on accident. But even if I change those two lines, it doesn't fix the problem. How should I go about changing grid-template-columns in the panel div?
– sirryankennedy
Commented Jun 17, 2018 at 19:44
I'm sorry I think I haven't communicated properly what was wrong in your code. You have declared three columns, so the code does what it's supposed to do. Creating three different columns. A column is a "table cell" so it works on a row. What happens is that it will be placed next to each other. In order to get them underneath each other, you have to place them on different rows instead of columns. So change "grid-template-columns: repeat(3, 1fr);" to "grid-template-rows: repeat(3, 1fr);" and it does what you want it to do.
– Melvin Idema
Commented Jun 18, 2018 at 14:15

Add a comment |

sirryankennedy · Accepted Answer · 2018-06-19 20:28:11Z

Thank you all for your suggestions. I solved the issue by removing the nested 'panel' and simply creating three different panels to fill the same space.

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

Collectives™ on Stack Overflow

Grid item won't take full height of parent container

3 Answers 3

Not the answer you're looking for? Browse other questions tagged
html
css
web-deployment
css-grid
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Not the answer you're looking for? Browse other questions tagged htmlcssweb-deploymentcss-grid or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
html
css
web-deployment
css-grid
or ask your own question.