Чтобы в Grid-сетке не зависеть от определенного количества колонок, можно использовать функцию repeat() в свойстве grid-template-columns. Функция repeat() позволяет создавать повторяющийся шаблон сетки, указывая количество повторений и ширину колонок.
Для примера, предположим, что у нас есть элемент с классом "grid-container", внутри которого мы хотим разместить элементы в сетке. Вместо явного указания количества колонок в свойстве grid-template-columns, мы можем использовать repeat() и автоматический размер колонок:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
В данном примере мы указали, что у нас будет автоматический размер колонок, который будет меняться в зависимости от ширины родительского контейнера. Функция auto-fit говорит о том, что сетка будет заполнять доступное пространство оптимальным количеством колонок.
Функция minmax() указывает минимальную и максимальную ширину колонки. В данном случае мы указали минимальную ширину колонки 200 пикселей. Если есть возможность, колонки будут растягиваться и занимать доступное пространство (1fr).
Таким образом, с использованием функций repeat() и auto-fit, мы создали гибкую сетку, которая будет подстраиваться под различные размеры экрана и не будет зависеть от конкретного числа колонок.