My idea is to create a website background that consists of a grid of perfectly square squares. The challenge here is that I need these squares to adjust in size proportionally to fit the screen without any cut-off squares on one side. Essentially, they need to be responsive and fill the entire page seamlessly. If this explanation isn't clear, please let me know!
I've explored two possible solutions for this issue. The first involves using simple CSS. While there's VH (vertical height) unit available for setting the height, I haven't been able to find an equivalent for width. If such a unit exists, I could set the squares' dimensions to 1W x 1W. This might solve the problem if it does exist.
If the CSS approach doesn't work, another alternative would be utilizing jQuery. With this method, I would calculate the screen width in pixels and assign a variable 'X' to be equal to the width divided by 100. By then setting the square height to 10*X and the width to 10%, we might achieve the desired result. However, this solution comes with the downside of having to execute the function every time the screen is resized, which could potentially cause performance issues on slower internet connections due to the number of squares used.
Perhaps I'm overcomplicating things. Does anyone have a simpler or more efficient solution to this dilemma?