Divs not spanning vertically using CSS Grid

user_6611813 0
Viewed 329

I'm trying to make a simple layout as I'm learning CSS Grid.

The layout should be as follows:
"header header header"
"adv content content"
"adv footer footer"

What I'm getting is this:
"header header header"
"adv content content"
". footer footer"

The div "adv" never takes the vertical space, doesn't matter if I do it using template-areas as above or using grid-row and columns as the code below. In fact, I'm not able to manipulate any of my divs vertically. I cannot make them span several rows. Can somebody maybe tell me what I'm doing wrong?

body {
  background: dimgray;
}

div {
  height: 200px;
  font-size: 50px;
  font-family: sans-serif;
  color: floralwhite;
}

.header {
  background-color: lightcoral;
  grid-column: 1 / 4;
}


/*Div having the issue below*/

.adv {
  background-color: blue;
  grid-row: 2/4;
  /*Expecting to span from row 2 to 4, but not happening.*/
}


/*Div having the issue above*/

.content {
  background: pink;
  grid-column: 2/4;
}

.footer {
  background-color: salmon;
  grid-column: 2/4;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
<body>
  <div class="container">

    <div class="header">header
    </div>

    <div class="adv">adv
      <!--Div with the issue-->
    </div>

    <div class="content">content
    </div>

    <div class="footer">footer</div>



  </div>
</body>

css-grid css html
3 Answers

You forced the height of all divs to be the same. This of course means adv can't be as big as two divs. So try this, if you still need the a minimum height on all divs (or just remove hight all together):

div {
      min-height: 200px; /* min/max-height is preferred to `height` for flexible layouts like grid and flex-box. */
      font-size: 50px;
      font-family: sans-serif;
      color: floralwhite;
    }


body {
  background: dimgray;
}

div {
  min-height: 200px; /* height means that all divs will be the same hieght which prevents the layout you want. Min-height is more correct here. */
  font-size: 50px;
  font-family: sans-serif;
  color: floralwhite;
}

.header {
  background-color: lightcoral;
  grid-column: 1 / 4;
}


/*Div having the issue below*/

.adv {
  background-color: blue;
  grid-row: 2/4;
  /*Expecting to span from row 2 to 4, but not happening.*/
}


/*Div having the issue above*/

.content {
  background: pink;
  grid-column: 2/4;
}

.footer {
  background-color: salmon;
  grid-column: 2/4;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
<body>
  <div class="container">

    <div class="header">header
    </div>

    <div class="adv">adv
      <!--Div with the issue-->
    </div>

    <div class="content">content
    </div>

    <div class="footer">footer</div>



  </div>
</body>

user_80318150

Your grid layout is fine, the problem is with: div {height: 200}, remove the height and it will work as expected.

user_66222330

try:

div.container {
    display: grid;
    grid-template-areas: 'h h h' 'a c c' 'a f f';
}
.header { grid-area: h; }

...

templates columns and rows can only draw simples tables.

template-area permitt to customise the display.

user_136142180
Related