Почему моя адаптивная сетка CSS ломается после вставки динамических элементов HTML с помощью JavaScript? ⇐ Javascript

[Anonymous]

Я работаю над проблемой внешнего интерфейса, из-за которой мой адаптивный макет сетки CSS ломается только после добавления динамического контента с помощью JavaScript (

Код: Выделить всё

fetch()

+ клонирование шаблона). Исходный макет отлично загружается на экранах всех размеров, но как только в сетку добавляются новые элементы, элементы перестают выравниваться правильно и иногда выходят за пределы контейнера.
Я проверил отсутствие закрывающих тегов, подтвердил, что динамически добавляемые элементы используют те же классы, что и статические, и даже принудительно перекомпоновал макет с помощью offsetHeight. Все еще не повезло. Эта проблема возникает в проекте, в котором я создаю Interiors Land, но проблема воспроизводится даже при упрощенной настройке.
Каковы распространенные причины сбоя макета CSS Grid или Flexbox только после динамического манипулирования DOM и как я могу гарантировать, что сетка правильно пересчитывает макет после внедрения контента?
При необходимости я могу поделиться минимальным воспроизводимым фрагментом.

Подробнее здесь: https://stackoverflow.com/questions/798 ... ments-with