Как адаптивно задавать элементы в строках

Question

У меня есть массивы карт, карта может занимать или 25% ширины экрана, или 50%. Таким образом, его объекты, как это: {имя: 1, размер: 25%}. После фильтрации массива через js, я получаю новый массив карт, и мне нужны макеты карт в сетке в строках с широкими 100%. Таким образом, это может занять 25 50 25, 50 50, 25 25 50 ... т. Д. Так что я думаю, что это можно сделать с помощью свойства grid-auto-flow. Но я еще не так хорош с сетками.

.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

Вы можете рассмотреть 1fr для единицы и затем сказать, охватит ли элемент один или два столбца:

.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>

Answer 2

Вы можете использовать макет с 4 столбцами, используя grid-template-columns: repeat(4, 1fr), а элементы card-wide могут занимать два столбца, используя grid-column: span 2 - см. Демонстрацию ниже:

.cards {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px; /* set a row height for illustration */
  grid-auto-flow: row dense; /* not compulsory here */
}

.card {
  border: 1px solid #d1d1d1;
}

.card-wide {
  grid-column: span 2; /* occupy two columns*/
}

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