CSS Grid автоматически подгоняется с max-контентом

Question

у меня 4 столбца.Фактическое содержание для столбцов 1 и 4 составляет 150 пикселей, для столбца 2 - 250 пикселей, а для столбца 3 - 370 пикселей.Я хочу обернуть столбцы при изменении ширины браузера.Когда я уменьшаю ширину браузера, я хочу, чтобы каждый столбец уменьшался до минимальной ширины перед переносом.Так что я думаю, что 4-й столбец упал бы в следующий ряд со 100% шириной после того, как он упал ниже ширины 150 пикселей.

Вот что, я думал, должно было сработать:

repeat(auto-fit, minmax(max-content, 1fr))

Есть ли способ достичь этого, не передавая фиксированную ширину, где «max-content» равен?

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

https://jsfiddle.net/9hjb5qv8/

Вот HTML / CSS, который я использовал в скрипте выше:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
  grid-gap: 8px;
}

@media (max-width: 799px) {
  .container {
      grid-template-columns: minmax(max-content, 1fr);
  }
}

@media (min-width: 800px) {
  .container .p2,
  .container .p3 {
    grid-column: auto / span 2;
  }
}

.container > div {
  background-color: gray;
  text-align: center;
}

<div class="container">
  <div class="p1">
    <img src="https://via.placeholder.com/150x150">
  </div>
  <div class="p2">
    <img src="https://via.placeholder.com/250x150">
  </div>
  <div class="p3">
    <img src="https://via.placeholder.com/370x150">
  </div>
  <div class="p4">
    <img src="https://via.placeholder.com/150x150">
  </div>
</div>

Answer 1

У меня был похожий вопрос при игре с сеткой:

grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))

Если мы посмотрим на документацию, то увидим, что команда minmax действительна: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

Но в повторяющейся документации по csswg говорится одно простое правило, которое запрещает всему этому происходить;https://drafts.csswg.org/css-grid/#funcdef-repeat

Общая форма синтаксиса repeat () приблизительно равна

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Первый аргумент указывает количество повторений.Второй аргумент - это список треков, который повторяется такое количество раз.

Однако существуют некоторые ограничения :

• Повтор () нотация не может быть вложенной.

• Автоматические повторения (автозаполнение или автоматическое заполнение) нельзя комбинировать с собственными или гибкими размерами .

Что такое внутренние или гибкие размеры?

• Встроенная функция определения размера (min-content, max-content, auto, fit-content()).

Таким образом, команда не будет работать в сетке, поскольку каждый столбец / строка будет иметь разные размеры и перенос не может быть выполнен.См. Рисунок ниже.

Это поведение должно быть выполнено с использованием flex-box.