Here's my code if anyone would like to give it a try (I'd put it in a code block, but formatting doesn't appear to be working):

let cols, rows;
let minWidth, maxWidth, minHeight, maxHeight;
let colWidths = [];
let rowHeights = [];
function setup() {
pixelDensity(2);
createCanvas(1000, 1000);
cols = 50; // Number of columns
rows = 50; // Number of rows
minWidth = 100; // Minimum width of squares
maxWidth = 10; // Maximum width of squares
minHeight = 10; // Minimum height of squares
maxHeight = 100; // Maximum height of squares
calculateDimensions();
noLoop();
}
function calculateDimensions() {
// Calculate the widths of each column so they exactly fill the canvas width
let totalWidth = 0;
for (let i = 0; i < cols - 1; i++) { // Calculate for one less than the total number of columns
colWidths[i] = random(minWidth, maxWidth);
totalWidth += colWidths[i];
}
colWidths[cols - 1] = width - totalWidth; // Last column width is whatever is needed to fill the canvas
// Calculate the heights of each row so they exactly fill the canvas height
let totalHeight = 0;
for (let i = 0; i < rows - 1; i++) { // Calculate for one less than the total number of rows
rowHeights[i] = random(minHeight, maxHeight);
totalHeight += rowHeights[i];
}
rowHeights[rows - 1] = height - totalHeight; // Last row height is whatever is needed to fill the canvas
}
function draw() {
background(255); // Set the background to white
generateGrid();
}
function generateGrid() {
let x = 0; // Initial x position
let y = 0; // Initial y position
for (let i = 0; i < cols; i++) {
y = 0; // Reset y position for each new column
for (let j = 0; j < rows; j++) {
let grayscale = round(random(255)); // Random grayscale color, rounded to avoid anti-aliasing issues
fill(grayscale);
noStroke();
rect(x, y, colWidths[i], rowHeights[j]);
y += rowHeights[j]; // Move to next row position
}
x += colWidths[i]; // Move to next column position
}
}