Почему не отрабатывает minmax()

Question

Есть разметка

 <div class="row-default__left-col">
                        <div class="left-col__row-speciality default">
                            <span class="row-speciality__corner"></span>
                            <p>Менеджмент безопасности предприятия</p>
                        </div>
                        <div class="left-col__row-speciality default">
                            <span class="row-speciality__corner"></span>
                            <p>Менеджмент безопасности предприятия</p>
                        </div>
                        <div class="left-col__row-speciality default">
                            <span class="row-speciality__corner"></span>
                            <p>Менеджмент безопасности предприятия</p>
                        </div>
                        <div class="left-col__row-speciality default">
                            <span class="row-speciality__corner"></span>
                            <p>Менеджмент безопасности предприятия</p>
                        </div>
                        <div class="left-col__row-speciality new">
                            <span class="row-speciality__corner"></span>
                            <p>Менеджмент безопасности предприятия</p>
                            <span class="mark">new</span>
                        </div>
                    </div>

Есть стили

.content__grid-four-col {
    display: grid;
    grid-template-columns: repeat(4, minmax(1fr, 270px));
    grid-auto-rows: 243px;
    grid-gap: 30px;
}

Если указать, к примеру grid-template-columns: repeat(4, minmax(200px, 270px)); - все работает, а с 1fr - нет, в спецификации MDN я ничего не нашел, в гугле - тоже, можете подсказать что не так?

Answer 1

Нашел как ни странно ответ вовсе не в документации а тут https://habr.com/ru/company/ruvds/blog/529830/ В итоге, чтобы расположить в сетке 4 элемента в ряд, одинаковые по размеру, но не больше 270px - я использую следующее

grid-template-columns: repeat(4, minmax(200px, 270px));

И дальше медиазапросами перестаривать сетку изменяя значение repeat

Answer 2

1fr для min не работает просто. Это как одно из правил использования. Эту единицу измерения можно применить только для max.

БЛОГ НА HUSL

Почему не отрабатывает minmax()

Ответы (2 шт):