How to set in CSS in grid this disposition in picture? - html

Question

.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
}
.grid-item {
background: blue;
height: 100px;
}
.grid-item .item1 {
grid-row-start: 1;
grid-row-end: 3;
}
<div class="grid-container">
<div class="grid-item"> </div>
<div class="grid-item item1"> </div>
<div class="grid-item"> </div>
</div>
I have this, but it's not what I want
What I don't want
I want this, see this following picture :
What I want

Answer 1

Remove the height from the grid-items and set the rows to be 100px.
Then tell the "tall" item to be in column 2
.grid-container {
display: grid;
gap: 10px;
grid-template-columns: 2fr 1fr;
grid-auto-rows: 100px;
}
.grid-item {
background: blue;
}
.grid-item.item1 {
grid-column:2;
grid-row: 1 / span 2;
}
<div class="grid-container">
<div class="grid-item"> </div>
<div class="grid-item item1"> </div>
<div class="grid-item"> </div>
</div>

Answer 2

At first, You have a typo .grid-item .item1 , .item1 is not a child of .grid-item . You need to remove that space in between classnames : .grid-item.item1.
beside you have also to reset height for .item1 so it can grow the entire rows it spans, and if you also set in which columns it should stand, it avoids to see it elsewhere.
To help you debug your css, give different background-color to your items to see exactly where they stand.
possible CSS fix
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
}
.grid-item {
background: blue;
height: 100px;
}
.grid-item.item1 {
grid-row-start:1;
grid-row-end:3;
grid-column:2;
height:auto;
background:red;
}
<div class="grid-container">
<div class="grid-item"> </div>
<div class="grid-item item1"> </div>
<div class="grid-item"> </div>
</div>

Answer 3

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
So you setting height of grid-item is wrong, because it defeats the whole purpose of grid, which is to assign area to grid childrens based upon the layout divided by grid-lines.
.grid-container {
display: grid;
grid-gap: 10px;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
height:200px;
}
.grid-item {
background: blue;
}
.item1 {
grid-row: 1/3;
grid-column: 2/3;
}
<div class="grid-container">
<div class="grid-item"> </div>
<div class="grid-item item1"> </div>
<div class="grid-item"> </div>
</div>