How to adjust block heights regardless of the height of another block in the grid?

Question

I want to make some blocks independent of the height of others, is it possible to do this?
How can I make my second box's height not depend on the height of the first one. Accordingly, box 4 should be pressed at the bottom of box 2?

.wrapper {
  max-width: 1200px;
  width: 100%;
  padding: 0 0px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: minmax(10px, auto);
  grid-gap: 1em;
  justify-items: stretch;
  align-items: stretch;
}

.wrapper>div {
  padding: 1em;
  background-color: #d7cfe79f;
}

.box-1 {
  grid-column: 1/7;
}

.box-2 {
  grid-column: 7/11;
}

.box-3 {
  grid-column: 1/7;
}

.box-4 {
  grid-column: 7/11;
}

<div class="wrapper">
  <div class="box box-1">Box 1<br/><br/><br/></div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

Expected Result:

Answer 1

You are looking for a masonry type of layout, which can be achieved using the new masonry keyworded value for grid-template-rows:

grid-template-rows: masonry;

Please note that this feature hasn't officially landed in any browser yet, so it's nothing you can apply for production use.

If you want to see it in action, use Firefox, open a new tab and enter about:config there. Confirm the security question, then type masonry in the searchbar.

This will show the experimental feature and allow you to enable it (set it to true). It's under

layout.css.grid-template-masonry-value.enabled

Until then, you will need workarounds like manually creating column wrappers, or use something like masonry.js.

Here's how Firefox renders it with the experimental masonry feature enabled:

.wrapper {
  max-width: 1200px;
  width: 100%;
  padding: 0 0px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: masonry;
  grid-gap: 1em;
  justify-items: stretch;
  align-items: stretch;
}

.wrapper>div {
  padding: 1em;
  background-color: #d7cfe79f;
}

.box-1 {
  grid-column: 1/7;
}

.box-2 {
  grid-column: 7/11;
}

.box-3 {
  grid-column: 1/7;
}

.box-4 {
  grid-column: 7/11;
}

<div class="wrapper">
  <div class="box box-1">Box 1<br/><br/><br/></div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>