У меня есть сетка, которая для больших экранов (@media (min-width: 800px)) использует сетку из 12 столбцов со следующей директивой:
grid-template-columns: repeat(12, [col-start] 1fr);
Но для мобильных устройств я использую вместо:
grid-template-columns: repeat(4, [col-start] 1fr);
Пока здесь все нормально, проблем нет.Но если я добавлю grid-gap: 1rem;, то проблема станет очевидной для маленьких экранов, поскольку кажется, что, хотя я и указал 4 столбца, он принимает 12 столбцов, 4 из которых имеют ширину 25%, а остальные - 0 пикселей, что ведет к плохому поведению.css.
В настоящий момент я не могу воспроизвести его в JSFiddle, но у меня есть некоторое представление о проблеме.
Для 12 столбцов на большом экране:
Применяемые стили: ( Другие вычисляемые значения )
@media (min-width: 800px) {
.my-grid {
display: grid;
padding: 2.5rem 4.875rem 0 4.875rem;
grid-template-columns: repeat(12,[col-start] 1fr);
}
}
Для 4 столбцов: 
Применяемые стили: ( Другие вычисленные значения )
.my-grid {
display: grid;
grid-template-columns: repeat(4,[col-start] 1fr);
padding: 1rem;
}
Как вы можете видетьВ вычисленных значениях для сетки из 4 столбцов установлено 4 столбца, а остальные с шириной 0px ...
В проверке элементов есть только те строки, которые я написал выше.
Любое представление о том, почемуу нас такое поведение?
На дополнительном примечании я использую styled-компоненты, и это div.
Codepen с thошибка