I have been wrestling with a challenging question regarding CSS layouts, and I believe it's time to seek advice from those who may be more knowledgeable in this area. Let's discuss why my current layout is presenting such a headache.
Take a look at this image: https://i.sstatic.net/KXJLW.png
The blue line you see represents the viewport. My application forces the layout to be horizontal or landscape-oriented, which the user understands and accepts as part of the design.
Now, onto the constraints... The left column can occupy no more than 30% of the available space within the viewport - a task that seems straightforward enough. The tic-tac-toe grid on the right side will take up the remaining space with about 12 pixels of separation between the two sections (achieved through margins, padding, etc.). In this example, the grid contains 9 boxes but should adjust fluidly if fewer boxes are present. Each column in the grid must have equal width, each row must have equal height, and the text within each box cannot disrupt the balance of the layout (overflow:hidden or ellipsis may be needed).
This layout needs to work seamlessly across various devices like desktop computers, phones, and tablets. While adaptability is important, maintaining consistent ratios and sizes is crucial.
That sums up my dilemma. I haven't shared any code because my current implementation has become convoluted and counterproductive, potentially influencing your ideas negatively. Any thoughts or assistance would be greatly appreciated!