Я хочу, чтобы мои элементы сетки были минимум 220px и максимум 250px и были отзывчивыми. Итак, сначала я попробовал эту сетку:
1) grid-template-columns: repeat(auto-fill, minmax(220px, 250px));
Это хорошо, но проблема в том, что он либо делает предмет 220px или 250px. In не создает ничего между (например, 201px, 202px, 203px и c.) В зависимости от размера контейнера. Во всяком случае, именно так minmax должен работать, но он не достиг sh того, что я хотел.
Итак, я попробовал этот код:
2) grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
Это было почти идеально, но Элемент в конечном итоге будет go выше 250px и в конечном итоге получит 263px, 277px и т. д. c, опять же, в зависимости от размера контейнера. Чтобы исправить это, я естественным образом добавил к каждому элементу:
3) max-width:250px;
Это решило то, что я хотел, но создало новую проблему. Разрыв сетки, который был установлен в 15px, начал расти между пунктами, превышающими 15px. Итак, могу ли я достичь того, что хочу?
Я хочу, чтобы элементы сетки были между 220px и 250px и менялись между этими размерами в зависимости от контейнера сетки, и я хочу, чтобы разрыв сетки составлял точно 15px.
Вот как выглядит конечный результат: https://jsfiddle.net/01w293sv/2/