Возьмем следующую сетку:
.grid {
display: grid;
grid-template-columns: [one] minmax(auto, 1fr) [two] minmax(auto, 1fr);
}
.item {
grid-column: one;
min-width: 3rem;
}
<div class="grid">
<div class="item">Item</div>
</div>
Элемент ведет себя так, как ожидается: оба столбца заполняют сетку, но по мере уменьшения родительского элемента первый столбец не становится меньше минимального- ширина элемента, 3rem, в то время как второй столбец продолжает сворачиваться до 0. Все хорошо.
Теперь рассмотрим
.item {
grid-column: one / span 2;
min-width: 3rem;
}
Теперь все столбцы свернуты до 0. По сути, 'auto'в данном случае означает 0 (что не ясно из спецификации, где говорится об auto как о максимуме, но не как о минимуме).
Вот кодовая ручка, иллюстрирующая это поведение.Посмотрите, как серый прямоугольник избегает своего контейнера при меньших размерах экрана!
https://codepen.io/anon/pen/RJbMVB?editors=1100
Есть ли способ заставить сетку соблюдать минимальную ширину элемента, охватывающего несколько столбцов, в то время каквсе еще позволяя им расширяться за счет доступного свободного пространства, когда сетка больше?Или текущее поведение для спецификации (и если да, то где это так сказано)?