Можно ли использовать динамическую переменную как «.grid-sizer» для ширины столбцов с изотопом? ⇐ Javascript

[Гость]

Я хочу создать адаптивный шаблон веб-сайта для сайта-портфолио на WordPress. Я использую изотоп для фильтрации и макета. Мне нужны следующие условия для адаптивного веб-сайта:
[*]максимальное количество столбцов -> 9 [*]минимальная ширина столбца -> 150 пикселей. [*]используйте как можно больше столбцов
Я использовал следующую функцию для расчета количества столбцов: n = MIN(9, FLOOR(x / y))
[*]n = количество столбцов [*]x = ширина экрана [*]y = минимальная ширина столбца
Затем я делю ширину экрана на «n» и устанавливаю результат как переменную (--Width). Эта переменная затем используется в таблице стилей CSS для динамической установки ширины столбца. Чтобы получить ширину экрана, я использую скрипт внутри шаблона страницы html и сохраняю его как переменную. Чтобы проверить это, я печатаю это в консоли — и все работает нормально. Но я думаю, что сценарий Javascript не может «использовать» переменную. Почему-то это не работает. Я совсем новичок в веб-разработке. Поэтому я не уверен, есть ли в моем решении фундаментальная проблема.

скрипт внутри шаблона страницы html для получения ширины экрана:

document.addEventListener('DOMContentLoaded', function() { // Получаем ширину контейнера в JavaScript constgridElement = document.querySelector('.grid'); constContainerWidth = GridElement.offsetWidth; // Распечатываем ширину контейнера в консоли console.log(`Ширина контейнера: ${containerWidth}px`); }); Функция Javascript для расчета количества столбцов и ширины столбца:

// Функция расчета количества столбцов NumberOfColumns(containerWidth, minWidth) { return Math.min(9, Math.floor(containerWidth / minWidth)); } Константа minWidth = 150; const n = NumberOfColumns (containerWidth, minWidth); //Распечатываем количество столбцов в консоли для проверки console.log(`Количество столбцов: ${n}`); //Рассчитываем ширину столбца функция ColumnWidth (WidthPerc, n) { return WidthPerc/n } const WidthPerc = 100; const Ширина = ColumnWidth (WidthPerc, n); //Распечатываем ширину столбца в консоли для проверки console.log(`Ширина столбца: ${Width}`); таблица стилей CSS:
* { box-sizing: border-box; } .grid {фон: #DDD; } /* ясное исправление */ .grid:after {content: ''; дисплей: блок; ясно: оба; } /* 5 столбцов, ширина в процентах */ .gutter-sizer {ширина: 10 пикселей} .element-item, .grid-sizer { width:calc(var(--Width) * 1%); } /* ---- .grid-item ---- */ .element-item { float: left; высота: 100 пикселей; фон: #0D8; граница: 2 пикселя, сплошная #333; цвет границы: hsla(0, 0%, 0%, 0,7); }