如何避免页面加载时CSS网格模板列的布局变化？

我正在使用以下CSS在我的站点上创建一个分幅网格

.columns-grid-maxcolumns { display:grid; grid-auto-flow:row; grid-template-columns:repeat(auto-fit,minmax(20em,1fr)); align-content:start; margin:1em; gap:1em; }

---

代码运行良好，但是在加载页面时，我得到了一个“布局转换”。如果我进入开发者模式并限制带宽并加载页面，我首先会看到一列，然后是两列，然后是三列，等等，这取决于屏幕的宽度。有没有办法避免页面加载时出现这种布局变化？网站是

我通过以下媒体查询自己找到了一个解决方案：

@media (min-width:730px) { .columns-grid-maxcolumns section { max-width:calc((100vw - 1em) / 2 - 1em); } }
@media (min-width:1066px) { .columns-grid-maxcolumns section { max-width:calc((100vw - 1em) / 3 - 1em); } }
@media (min-width:1402px) { .columns-grid-maxcolumns section { max-width:calc((100vw - 1em) / 4 - 1em); } }
@media (min-width:1696px) { .columns-grid-maxcolumns section { max-width:calc((100vw - 1em) / 5 - 1em); } }

在此解决方案中，我的分幅在

标记中定义。如果CSS calc（）函数支持整数楼层算法，则可以避免媒体查询。显示的列数=楼层（（100vw-1em）/22em）。在上述媒体查询中，这些数字表示为常数2、3、4和5

更新

我必须根据媒体查询硬编码网格模板列，以完全消除布局变化。对于5列或更多列，我只是默认为网格模板列的原始声明，该声明适用于任意数量的列，并且会出现布局偏移

.columns-grid-maxcolumns { display:grid; grid-auto-flow:row; grid-template-columns:1fr; align-content:start; margin:1em; gap:1em; }
.columns-grid-maxcolumns section { border-radius:1ex; max-width:calc(100vw - 2em); }
@media (min-width:730px) { .columns-grid-maxcolumns { grid-template-columns:1fr 1fr; } .columns-grid-maxcolumns section { max-width:calc((100vw - 1em) / 2 - 1em); } }
@media (min-width:1066px) { .columns-grid-maxcolumns { grid-template-columns:1fr 1fr 1fr; } .columns-grid-maxcolumns section { max-width:calc((100vw - 1em) / 3 - 1em); } }
@media (min-width:1402px) { .columns-grid-maxcolumns { grid-template-columns:1fr 1fr 1fr 1fr; } .columns-grid-maxcolumns section { max-width:calc((100vw - 1em) / 4 - 1em); } }
@media (min-width:1696px) { .columns-grid-maxcolumns { grid-template-columns:repeat(auto-fit,minmax(20em,1fr)); } }

---

寻求代码帮助的问题必须包含在问题中重现问题所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。看，我不认为我可以提供复制问题所需的较短的代码副本。据我所知，我还没有能够找到一个解决这个问题使用我的谷歌富。我在下面找到了一个使用媒体查询的解决方案，并在这里与世界其他地方分享。