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

У меня есть массивы карт, карта может занимать или 25% ширины экрана, или 50%. Таким образом, его объекты выглядят так: { name: 1, size: 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

Привет и добро пожаловать в SO. См. Как спросить и укажите Минимальный, полный и проверяемый пример. Что у вас есть до сих пор? Каков желаемый результат?

— 23.04.2019 17:41

html css layout css-grid

23.04.2019 17:37

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

tnx, не знаю о пролете 2 =)

— 23.04.2019 17:54

23.04.2019 17:43

Ответ принят как подходящий

Вы можете рассмотреть 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>

tnx, не знаю о пролете 2 =)

— 23.04.2019 17:54

23.04.2019 17:44