Have you considered incorporating the CSS property min-height into the .col > div selector? You can achieve this by adding
min-height: calc(100% / var(--col-rows));
, where
var(--col-rows) is a CSS variable set in your stylesheet using data from the DOM via JavaScript.
.col {
/* target the div within the .col in your scss */
> div {
/* Using the --col-rows variable to calculate
the number of elements in each row so they occupy equal space */
min-height: calc(100% / var(--col-rows));
To dynamically set the CSS variable based on the number of rows, you can use JavaScript to extract the row count and insert that value into your :root declaration with setProperty().
document.documentElement.style.setProperty(`--col-rows`, maxNum);
The CSS :root element now includes:
:root {
--col-rows: 0; /* This will be updated by JS to reflect
the number of rows in the DOM */
}
To determine the row count, you can:
// Select all .col elements
const columnRows = document.querySelectorAll('.col');
// Initialize an empty array to store row lengths
const lengthArr = [];
// Iterate over the rows and gather the length of each column's rows
columnRows.forEach(item => {
let count = item.children.length;
// Add each row's length to the array
lengthArr.push(count);
});
// Find the maximum row count
const maxNum = Math.max(...lengthArr);
// Update the --col-rows CSS variable using the root HTML element
document.documentElement.style.setProperty(`--col-rows`, maxNum);
With these adjustments, the number of rows will be automatically calculated using JavaScript and applied to the .col > div min-height property in your CSS styling.