How to chunk array into nice grid of rows and columns, where columns always line up (all rows are e

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!How to chunk array into nice grid of rows and columns, where columns always line up (all rows are even, or all are odd)?

What is an algorithm (in JavaScript/TypeScript), which can chunk an array into rows and columns, where the columns always line up across rows (i.e. all rows either odd, or all rows are even, not a mixture of odd and even)?
The input is the maxColumns allowed per row, and the array. It then chunks the array into an array of arrays, no larger than maxColumns, such that all rows are even, or all rows are odd, and each subsequent row can have no less than 2 fewer than the previous row. This makes the grid look good IMO.
maxColumns
and
Here are a few examples to handle, how the grid should be laid out:
# length 6, maxColumns 5
# nope: rows are more than 2 apart
x x x x x
x

# same, length 6, maxColumns: 5
# yep, both even *and* rows are no less than 2 apart
x x x x
x x

# length: 7, maxColumns: 6
# nope: can't mix even and odd...
x x x x x x
x

# same, length: 7, maxColumns: 6
# close, but still can't mix even/odd
x x x x
x x
x

# same, length: 7, maxColumns: 6
# yep!, rows are no more than 2 apart, and both odd
x x x
x x x
x

# length: 17, maxColumns: 7
# yep!, rows are no more than 2 apart, and both odd
x x x x x x x
x x x x x
x x x
x
x

# length: 17, maxColumns: 6
# yep!, rows are no more than 2 apart, and both odd
x x x x x
x x x x x
x x x
x x x
x

# length 6, maxColumns 5
# nope: rows are more than 2 apart
x x x x x
x

# same, length 6, maxColumns: 5
# yep, both even *and* rows are no less than 2 apart
x x x x
x x

# length: 7, maxColumns: 6
# nope: can't mix even and odd...
x x x x x x
x

# same, length: 7, maxColumns: 6
# close, but still can't mix even/odd
x x x x
x x
x

# same, length: 7, maxColumns: 6
# yep!, rows are no more than 2 apart, and both odd
x x x
x x x
x

# length: 17, maxColumns: 7
# yep!, rows are no more than 2 apart, and both odd
x x x x x x x
x x x x x
x x x
x
x

# length: 17, maxColumns: 6
# yep!, rows are no more than 2 apart, and both odd
x x x x x
x x x x x
x x x
x x x
x

Is there a simple equation or algorithm that can accomplish this? I have spent over an hour thinking about this problem but haven't made much progress as it feels complex to wrap my head around.
This is as far as I've gotten:
function layout(length: number, maxColumns: number) {
const rows: Array number = []
if (length % maxColumns === 0) {
// 7 7 7
while (length) {
length -= maxColumns
}
} else if (isEven(maxColumns)) {

}
return rows
}

function layout(length: number, maxColumns: number) {
const rows: Array number = []
if (length % maxColumns === 0) {
// 7 7 7
while (length) {
length -= maxColumns
}
} else if (isEven(maxColumns)) {

}
return rows
}

Tags: algorithm,math,layoutSource of the question:

Question and source license information: