Позволяет столбцам CSS Grid быть короче, чем Grid Gap, чтобы предотвратить переполнение
Я работаю над своим система сетки, который допускает до 16 столбцов в строке, и каждый из них был разделен 1rem промежутком.
В строке может быть 4 столбца, если каждый столбец занимает 4 ширины (4 x 4 = 16).
И в строке может быть только один столбец, если каждый занимает 16 ширины.
Проблема
Когда я сжимаю сетку, столбец переполняется.
Столбцы могут сжиматься, но это не может быть меньше, чем Grid Gap.
1rem (Gap) * 16 (Columns per row) = 16rem
Следовательно, Сетка не может быть короче 16rem.
※ Черная рамка указывает на контейнер Grid.
Поскольку этого не произошло с Flexbox, мне интересно, есть ли какой-либо стиль, позволяющий столбцу быть короче, чем зазор сетки, чтобы моя сетка могла быть короче, чем 16rem?
Код
Сетка
.ts-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(16, minmax(0, 1fr));
}
Столбцы
.ts-grid .column {
grid-column: auto / span 1;
}
@Paulie_D Я пробовал использовать медиа-запросы, но некоторые контейнеры на экране рабочего стола маленькие, что не может вызвать мои условия медиа-запросов. Жду Запросы контейнера :(.
Ответы 1
Используйте min() на зазоре, чтобы уменьшить его, когда контейнер маленький:
.grid {
display: grid;
gap: min(1rem, 5%);
grid-template-columns: repeat(16, minmax(0, 1fr));
border:1px solid;
}
.grid>div {
height:50px;
background:red;
}
.grid > div:only-child {
grid-column: span 16;
}<div class = "grid">
<div></div>
</div>
<div class = "grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Вот для чего нужны медиа-запросы.