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

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

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

user_2802040 · Answer

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

user_2442099 · Answer

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

user_15387341 · Answer

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

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

3 Answers