Split screen based on number of items and screen ratio

Question

I have to split the screen equally (as possible) given a dynamic number of items.

So i need to find the number of columns and rows based on the screen size/ratio.

Each item size is not important since i will calculate them in % based in the items per col and row.

If i have 5 items, then (depending on the screen ratio) i will probably have 3 columns in the 1st row and 2 columns in the 2nd row. That's ok.

Answer 1

First you have to decide what you mean with "divide the screen equally". It probably means that there is a preferred x-to-y ratio for each item.

You could use the following algorithm that favors getting close to the desired x-to-y ratio over reducing the number of empty spaces.

// Set this to the desired x-to-y ratio.
const preferred_ratio = 1.2; 

function calc_cols_rows(In: screen, In: num_items, Out: num_rows, Out: num_cols) {
  desired_aspect = (screen.width / screen.height) / preferred_ratio;

  // Calculate the number of rows that is closest to the desired aspect:
  num_rows = round(sqrt(num_items / desired_aspect));

  // Calculate the required number of columns:
  num_cols = ceil(num_items / num_rows);
}