Is it possible to use a dynamic variable as '.grid-sizer' for the width of columns with isotope?

Question

I want to make a responsive website-template for a portfolio-wordpress-site. I'm using isotope for the filtering and the layout. I want the following conditions for the responsive website:

1. max number of columns -> 9
2. min width of column -> 150px
3. use as many columns as possible

I used to following function to calculate the number of columns: n = MIN(9, FLOOR(x / y))

• n = number of columns
• x = screen width
• y = min column width

Then I divide the screen width through 'n' and set the result as a variable (--Width). This variable is then used in the css stylesheet to dynamically set the column width. To get the screen width i use a script inside the html page-template and save it as a variable. To test that, I print it in the console - which works fine. But I think the javascript script can not "use" the variable. Somehow this doesn't work. I'm quite new to web-development. Therefore i am no sure if there is a fundamental problem with my solution.

script inside the html page-template to get screen width:

<script> document.addEventListener('DOMContentLoaded', function() { // Get the container width in JavaScript 
const gridElement = document.querySelector('.grid'); const containerWidth = gridElement.offsetWidth; 
// Print the containerWidth in the console 
console.log(`Container Width: ${containerWidth}px`); }); </script>

javascript function to calculate the number of columns and the column width:

// Calculate Number of Columns function 
NumberOfColumns(containerWidth, minWidth) { return Math.min(9, Math.floor(containerWidth / minWidth)); } const minWidth = 150; const n = NumberOfColumns(containerWidth, minWidth); //Print the number of Columns in the console to test 
console.log(`Number of Columns: ${n}`); 
//Calculate Column Width 
function ColumnWidth (WidthPerc, n) { return WidthPerc/n } const WidthPerc = 100; const Width = ColumnWidth(WidthPerc, n); 
//Print the column width in the console to test 
console.log(`Column Width: ${Width}`);

css stylesheet:

* { box-sizing: border-box; } 
.grid { background: #DDD; } 
/* clear fix */ 
.grid:after { content: ''; display: block; clear: both; } 
/* 5 columns, percentage width */ 
.gutter-sizer { width: 10px } 
.element-item, .grid-sizer { width: calc(var(--Width) * 1%); } 
/* ---- .grid-item ---- */ 
.element-item { float: left; 
height: 100px; 
background: #0D8; 
border: 2px solid #333; 
border-color: hsla(0, 0%, 0%, 0.7); }

Answer 1

The number of columns function is not defined properly :

NumberOfColumns(containerWidth, minWidth) { return Math.min(9, Math.floor(containerWidth / minWidth)); } const minWidth = 150; const n = NumberOfColumns(containerWidth, minWidth);

fixed code :

// Calculate Number of Columns function
function NumberOfColumns(containerWidth, minWidth) {
  return Math.min(9, Math.floor(containerWidth / minWidth));
}

function calculateColumnWidth(containerWidth, n) {
  const widthPerc = 100;
  return widthPerc / n;
}

function updateColumnWidth() {
  const gridElement = document.querySelector('.grid');
  const containerWidth = gridElement.offsetWidth;
  const minWidth = 150;
  const n = NumberOfColumns(containerWidth, minWidth);
  const width = calculateColumnWidth(containerWidth, n);

  console.log(`Container Width: ${containerWidth}px`);
  console.log(`Number of Columns: ${n}`);
  console.log(`Column Width: ${width}`);

  document.documentElement.style.setProperty('--Width', `${width}%`);
}

document.addEventListener('DOMContentLoaded', function() {
  updateColumnWidth();
});

window.addEventListener('resize', function() {
  updateColumnWidth();
});