-1

This is a tough question and I've struggled with it long enough - time to ask people who probably know more than I about CSS layouts and why my layout is such a nightmare.

Consider this image: enter image description here

The blue line represents the viewport. The layout is forced by the application to be horizontal / landscape. The user understands this, so not an issue.

The constraints... The column on the left can occupy no more than 30% of the available viewport space. That's easy enough. The tic-tac-toe grid to the right will occupy the remainder. Between the left column and the grid, there is about 12px space (margins, padding, whatever gets it done). The grid on the right, in this example, has 9 boxes, but can have less and needs to flow accordingly. The widths of the columns in the grid must be equal. The heights of the rows in the grid must be equal. The text in each box in the grid cannot force the size to become unbalanced (width or height), meaning overflow: hidden is acceptable or truncate and add ellipsis.

This can be displayed on a desktop computer, phone, tablet, etc. The layout should adapt, but that's not a huge issue. Maintaining the ratios/sizes is.

So, that's about it. Tricky. I intentionally haven't posted code because my code for this has become such a monstrosity as to become useless and likely to taint any ideas the enlightened folks here might have.

Thoughts? Help? Thank you so much in advance!

Erick
  • 369
  • 3
  • 13

2 Answers2

0

You can do it pretty easy using flexbox . Here's a complete tutorial on flexbox

Also, you can do it by using javascript, getting the wrapper width and height and divide by 3, and assign the values to the tic tac cells

It would be great if u have included your code

Amir Shahbabaie
  • 1,352
  • 2
  • 14
  • 33
0

Try using Flexbox for this. That would help you solve your probelm easy.

Hope this links help you to solve your problem.

1.Link 1

2.Link 2

Lavya R
  • 201
  • 1
  • 7
  • Original implementation used tables. That sucked. New implementation I tried uses flexbox, but it's not working well. I actually researched it and use those to sites to build it. As the guy below says, it's probably going to take some javascript, but was hoping for a cleaner solution. – Erick May 16 '17 at 19:24