How can I set the height of a row dynamically with grid?-CodePudding

I'm trying to build a grid where the first-row would have 400px and the second would be something like fit-content, since my first column is dynamically created and it can have an undertemined height.

The idea is, I have three blocks, 1 is dynamic, 2 and 3 are static, where 3 should always be below 2:

However I couldn't find a way to make the first row with a fixed value (400px) and the second auto to fit whatever height the block 1 have. If I set the first one auto and the second row 400px I get this:

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto 400px;
  width: 400px;
}

.block-1 {
  height: 300px;
  width: 200px;
  background: red;
}

.block-2 {
  height: 100px;
  width: 150px;
  background: blue;
  grid-column: 3/5;
}

.block-3 {
  height: 100px;
  width: 150px;
  background: green;
  grid-column: 3/5;
  grid-row-start: 2;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

Is there a way to do that with grid? I could change the structure of the grid, the way I bult is not a must.

P.S. Changing the HTML is not an option.

CodePudding user response：

Is this what you want?

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto 400px;
  width: 400px;
}

.block-1 {
  height: 300px;
  width: 200px;
  background: red;
  grid-row: 1 / 3;
}

.block-2 {
  height: 100px;
  width: 150px;
  background: blue;
}

.block-3 {
  height: 100px;
  width: 150px;
  background: green;
  grid-column: 2/3;
  grid-row-start: 2;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

This seems like it will do the trick. I've used named grid-template-areas as shorthand.

.container {
  display: grid; 
  grid-auto-columns: 1fr; 
  grid-auto-rows: 1fr; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: min-content; 
  gap: 0px 0px; 
  grid-template-areas: 
    "block-1 block-2"
    "block-1 block-3"; 
  width: 400px; 
}

.block-1 { grid-area: block-1; background-color: red; height: 300px}

.block-2 { grid-area: block-2; background-color: blue; height: 100px }

.block-3 { grid-area: block-3; background-color: green; height: 100px; }

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

Hopefully that works out for you, but if you need to make any adjustments then I always find using a site with a visual UI for the grid really helps, e.g. https://grid.layoutit.com/