Как я могу избежать сдвига макета с помощью 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

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 () поддерживает целочисленную арифметику этажа, вы можете избежать медиа-запросов. Количество отображаемых столбцов = этаж ((100vw - 1em) / 22em). Эти числа представлены как константы 2, 3, 4 и 5 в медиа-запросах выше.

Answer 2

Вы можете попробовать использовать auto-fill вместо того auto-fit. Это должно решить проблему сдвига макета в вашем случае. Обратитесь к этому отличному руководству, чтобы узнать о различиях между ними. https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/