Есть ли способ ограничить ширину CSS-сетки с помощью Auto-Fit и Auto-Fill, не влияя на ее отзывчивость? Или есть лучший метод для использования?
Используя CSS ниже, у меня есть 7 элементов управления, которые все помещаются в одну строку, я хотел бы разделить это на две строки, не влияя на отзывчивость, идея состоит в том, чтобы ограничить, насколько широкими могут быть строки с автоподгонкой.
Я пытался использовать 'width: px', но это нарушает отзывчивость.
Код для одной секции:
.Search {
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(auto-fit, 200px);
align-items: end;
}
Я могу разбить его на несколько разделов HTML, но это оставляет пробел.
Код для нескольких разделов:
.Search, .SchoolID {
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(auto-fit, 200px);
align-items: end;
}
Снимок экрана с несколькими разделами.
При определенном разрешении экрана строка 2 столбца 2 пуста, поскольку следующий элемент начинается в другом разделе. Все остальные разрешения подходят для нескольких разделов, но я бы тоже хотел учесть это разрешение. Я бы предпочел учесть это без использования нескольких разделов HTML, если это возможно.
