Grid items expand to follow offset between columns [duplicate]

Question

I'm trying to make an html/css card system that automatically places itself on a css grid. This css grid is divided into two columns. In the left column, a div adds an offset to the rest of the column, and has no fixed size. I want to keep this offset between the two columns.

The problem is that the first card on the left (number 2) grows to compensate for the offset, but all cards must have the same size. How can I fix that without fixing the size of each card ?

What I would like to do:

What I currently have:

A simple example of code to reproduce it:

.grid {
  display: grid;
  background-color: #eee;
  grid-gap: 5px 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 60px;
  font-size: 150%;
}

.grid__1 {
  background-color: #ccc;
  grid-column: 1 / 2;
  padding: 5px;
  font-size: 1rem;
}

.grid__item {
  grid-column: span 1;
  grid-row: span 2;
}

<div class="grid">
  <div class="box grid__1">head</div>
  <div class="box grid__item">1</div>
  <div class="box grid__item">2</div>
  <div class="box grid__item">3</div>
  <div class="box grid__item">4</div>
  <div class="box grid__item">5</div>
  <div class="box grid__item">6</div>
</div>

I made a live example here : https://jsfiddle.net/rLpqt75d/3/

Answer 1

I did some research and it looks like you are trying to replicate a mansonry-layout. If you don't know what it is, it is the layout used by pintarest.
After a while googleing I found a great article you could look into:
https://kulturbanause.de/blog/responsive-masonry-layout-mit-css/

I'll try to summarize: In the future we will get a css property: grid-template-rows: masonry;

But until then we will have to stick to flex-box.

I copied the example of the blog post to a fiddle and modified it a little for a better overview:
https://jsfiddle.net/8k1nyg39/41/

Hope I could help someone (:

EDIT: So I experimented a bit with it and it seems like you need a predetermined height for your container...

If you need your container to change height dynamically the only remaining workaround I know of would be a js library like Magic Grid ...

Answer 2

define a pair of rows for the property grid-auto-rows, this will set the correct size :

.grid {
  display: grid;
  background-color: #eee;
  grid-gap: 5px 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  
  grid-auto-rows: 40px 200px; /* added */
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 60px;
  font-size: 150%;
}
.grid__1 {
  background-color: #ccc;
  grid-column: 1 / 2;
  padding: 5px;
  font-size: 1rem;
}

.grid__item {
  grid-column: span 1;
  grid-row: span 2;
}

<div class="grid">
  <div class="box grid__1">head</div>
  <div class="box grid__item">1</div>
  <div class="box grid__item">2</div>
  <div class="box grid__item">3</div>
  <div class="box grid__item">4</div>
  <div class="box grid__item">5</div>
  <div class="box grid__item">6</div>
</div>