Your grid layout is fine, the problem is with: div {height: 200}, remove the height and it will work as expected.
Solution 1 :
Solution 2 :
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>Solution 3 :
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.
Problem :
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>Comments
Comment posted by Take the tour
You should.
Comment posted by Nico Haase
Please add some explanation to your answer such that others can learn from it
Comment posted by Garrett Motzner
I don’t think “templates columns and rows can only draw simples tables” is actually true. It does have limits, but it is possible to use it for the requested use case.