CSS Сетка, чтобы иметь минимальное количество столбцов возможно с автоматическим потоком после обертывания - PullRequest
Новая
       20

CSS Сетка, чтобы иметь минимальное количество столбцов возможно с автоматическим потоком после обертывания

0 голосов
/ 25 февраля 2020

Возможно ли иметь сетку CSS с автоматическим потоком, которая минимизирует количество столбцов после переноса? Как?

У меня есть сетка из 6 предметов с автоматическим размещением. Когда не все 6 из них помещаются в один ряд, мне бы хотелось иметь 3 столбца и 2 строки вместо 5 столбцов и 1 строки, а во втором только один элемент.

Мне бы хотелось по возможности избегать медиазапросов.

Визуальное представление того, что я хотел бы сделать:

1) Если все 6 элементов помещаются в одну строку, показывайте их в одной строка. 

| OOO OOO OOO OOO OOO OOO | 
| O1O O2O O3O O4O O5O O6O |
| OOO OOO OOO OOO OOO OOO |

2) Если в одном ряду помещается менее 6 элементов, покажите их в 2 ряда по 3 элемента в каждом. 

| OOO OOO OOO         | 
| O1O O2O O3O         | 
| OOO OOO OOO         | 
|                     | 
| OOO OOO OOO         | 
| O4O O5O O6O         | 
| OOO OOO OOO         |

3) Если подходит менее 3 элементов в одном ряду покажите их в 3 ряда по 2 предмета в каждом. 

| OOO OOO   | 
| O1O O2O   | 
| OOO OOO   | 
|           | 
| OOO OOO   | 
| O3O O4O   | 
| OOO OOO   | 
|           | 
| OOO OOO   | 
| O5O O6O   | 
| OOO OOO   |

Вот что я получил до сих пор. Уменьшите ширину, пока не закончится последний столбец, в этот момент я бы хотел иметь 3 столбца с тремя элементами каждый вместо одного с 5 и другого с 1. 

.grid {
  padding: 10px;
  border: 2px solid #444;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  justify-content: space-evenly;
}

.item {
  height: 50px;
  background: #5a5a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}
<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

1 Ответ

0 голосов
/ 25 февраля 2020

Редактировать: Обратите внимание, что я написал ответ до того, как ОП добавил свой код к вопросу. Тем не менее, я все еще думаю, что @media запросов необходимы для решения этой проблемы, независимо от метода, в котором отображаются элементы div.

Оригинальный ответ:

Ниже я продемонстрировал использование тега br и @media запросов.

Выполнить фрагмент, а затем нажмите «Полная страница», чтобы проверить его: 

.grid-box {
  display: inline-block;
  width: 200px;
  height: 150px;
  background-color: blue;
  margin: 2px;
}

.row3 {
  display: none;
}

@media (max-width: 1260px) {
  .row3 {
    display: block;
  }
}

@media (max-width: 636px) {
  .row3 {
    display: none;
  }
}
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<br class="row3">
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
...