How adaptive set items in rows

Question

I have arrays of cards, card can take or 25% wide of screen, or 50%. So its objects like this : { name: 1, size: 25% }. After filtering array via js im getting a new array of cards and i need layout cards in grid in rows with wide 100%. So it can take 25 50 25, 50 50, 25 25 50 ...ect. So i think it can be make with grid-auto-flow property. But im not so good with grids yet.

.cards {
  display: grid;
  width: 100%;
  grid-auto-flow: row dense;
}
.card {
  border: 1px solid #d1d1d1;
  width: 25%;
}
.card-wide {
  width: 50%;
}

https://codesandbox.io/s/23moj6z09y

Answer 1

You can consider 1fr for the unit and then tell if an element will span one or two columns:

.cards {
  display: grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-flow:dense;
}
/*will take one column by default*/
.card {
  background:red;
}
.card-wide {
  grid-column:span 2; /*two column*/
  background:green;
}

.cards  > div {
  min-height:50px;
  border:1px solid;
}

<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card-wide"></div>
<div class="card"></div>
<div class="card"></div>
</div>