计算要在一个屏幕上显示的元素的宽度和高度，元素数量未知

Question

I have project where I would like to display sensor readings from the building. It contains temperature, date and name of the room. It is in one small simple square. I would like it to be displayed on the TV monitor( I am unaware of what the resolution will be, but that can be calculated with JS).

Problem is, I don't know how many readings there are going to be and I need to show them all on the screen(Since it is going to be on monitor without possibility to scroll). I don't know how to calculate their dimension so they would fit. I didn't find any miraculous css property for this so I am fine with creating some JS function. However, I don't have an idea where to start. I would know the number of sensors and resolution, that is all. This number of readings will change over time though.

Any JS libraries that could do this? If none, what function should I write?

Edit: Touffy's solution works great! I found this article for others in needs: Dynamic number of rows and columns with CSS Grid Layout and CSS variables

Answer 1

You can probably decide which browser will be used for this sort of application, so you can pick one that supports CSS Grid Layout . With that, you can do what you want without any JavaScript by specifying the grid container to take the whole viewport ( 100vh and 100vw ), and letting it arrange the grid items with the constraints you like (number of columns, spacing…).