CSS GRID Auto Fit с Max-Content ⇐ CSS

[Anonymous]

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

Код: Выделить всё

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

Есть ли способ достичь этого без прохождения фиксированной ширины, где «макс-контент»? /> Вот html /css, я использовал в скрипке выше: < /p>


.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;
}< /code>

Код: Выделить всё

[img]https://via.placeholder.com/150x150[/img]

[img]https://via.placeholder.com/250x150[/img]

[img]https://via.placeholder.com/370x150[/img]

[img]https://via.placeholder.com/150x150[/img]

Подробнее здесь: https://stackoverflow.com/questions/527 ... ax-content