css - 如何避免在页面加载时使用 CSS grid-template-columns 进行布局转换？

Question

我正在使用以下 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; }

该代码工作正常，但是在加载页面时我得到了“布局转换”。如果我进入开发人员模式并限制带宽并加载页面，我首先会看到一列，然后是两列，然后是三列，依此类推，具体取决于屏幕的宽度。有没有办法避免页面加载时出现这种布局变化？网站是https://portfoliotoolbox.com

标签： cssgridcumulative-layout-shift

Answer 1

我使用以下媒体查询自己想出了一个解决方案：

@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); } }

在这个解决方案中，我的图块是在<section>标签中定义的。如果 CSS calc() 函数支持整数下限算法，则可以避免媒体查询。显示的列数 = floor((100vw - 1em) / 22em)。这些数字在上面的媒体查询中表示为常量 2、3、4 和 5。

更新

我不得不根据媒体查询对网格模板列进行硬编码，以完全摆脱布局转换。对于 5 列或更多列，我只是默认为 grid-template-columns 的原始声明，该声明适用于任意数量的列，并且会受到布局偏移的影响。

.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)); } }