使用CSS网格的自动填充/自动调整功能时如何防止布局偏移？

Question

借助auto-fill功能，我创建了一个带有网格的布局，当屏幕变小时，该布局会包裹列：

css

grid-template-columns: repeat(auto-fill, minmax(2rem, 32rem));

但是，上面的代码在页面加载时导致了令人不快的版式转换：

我将代码更改为以下内容以解决此问题：

css

grid-template-columns: minmax(6rem, 32rem) minmax(6rem, 32rem);
@media only screen and (max-width :768px) {
    grid-template-columns: minmax(6rem, 32rem);
}

工作正常，但我不想使用媒体查询。

是否有使用auto-fill并避免在页面加载时改变布局的技术？