CSS GRID Auto Fit с Max-ContentCSS

Разбираемся в CSS
Ответить
Anonymous
 CSS GRID Auto Fit с Max-Content

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»