如何在使用CSS grid'；s自动填充/自动调整功能？

由于

自动填充功能，我创建了一个带有网格的布局，当屏幕变小时，它会包装列：

css

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

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

但是，上面的代码会导致页面加载时出现令人不快的布局变化：


我将代码更改为以下内容以修复此问题：

css

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

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

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

是否有技术可以使用
自动填充
并避免页面加载时改变布局？
媒体查询是网页设计的重要组成部分，不使用它们毫无意义。包括css grid在内的大多数布局方法都要求它们实现其功能。我不明白这种转变是如何发生的，不管内容加载时间如何，
auto-fill
将根据
max size
中的子级数量生成列，如果它可以容纳所有列的话。如果说你在一个大屏幕上，列将从一开始就设置在每个列的旁边，如果在一个小屏幕上，列将堆叠起来。只有在调整窗口大小时，您才会看到移动问题，这不是问题，因为您正在寻找它。