0

I'm creating a board game where I want to display a board of square fields that always fit in 100% of the screen's height and/ore width (scrollbar should never appear), so it should be responsible both vertically and horizontally. Number of rows and columns is dynamic.

Additionally the board should change it's orientation depending if there's more rows or columns to display. A little overview in images on what I'm trying to achieve:

Horizontal orientation (big screen):

Horizontal orientation (small screen):

Vertical orientation:

I suppose if I get knowledge how to make either fully responsive, the other orientation won't be a problem.

Here's snippet of my code structure which is pretty standard as you might expect (Angular-generated):

The solutions I tried to use like these http://bluecaret.com/blog/responsive-grid-of-squares are inadequate and insufficient for me. The grid either doesn't span properly to the screen width/height (these vw / vh numbers really don't make sense to me) or is well responsive only in one direction.

I'm open to advices with use of flex / bootstrap / plain CSS.

This is the first issue I failed to solve in CSS in unlimited amount of time.. :|

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Dedemonn
  • 128
  • 10
  • u want a solution in angular or jquery? – Fahim Khan Sep 26 '19 at 11:23
  • how many square is there , 50 or 250 ? is it a fix amount ? What is your template ? *screenshot are useless and not usable for a demonstartion* – G-Cyrillus Sep 26 '19 at 12:08
  • is this for a sudoku grid ? https://stackoverflow.com/questions/37105579/responsive-grid-of-squares-within-a-responsive-grid-of-squares/37105929#37105929 , or here an example with vmin https://codepen.io/gc-nomade/pen/vYBMLyX about vh,vw,vmax and vmin , here is an explanation among others https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ – G-Cyrillus Sep 26 '19 at 12:26
  • @FahimKhan preferably in CSS, but if it's not achievable then in Angular – Dedemonn Sep 26 '19 at 13:02
  • I am new in angular but I have a solution in jquery if u convert it into angular so I post it. – Fahim Khan Sep 26 '19 at 13:04
  • @G-Cyr I plan it to be max 20x20 for now. As I mentioned - the board is dynamic and can have any number of columns and rows. As I'd like to accomplish this in CSS, the last screen should be enough to see how the HTML looks like (nothing extraordinary there too - just a rows of divs). – Dedemonn Sep 26 '19 at 13:05
  • CSS can easily handle a known amount of element, when it is random, it turns to be tricky to keep a 1:1 ratio . even through mediaquerie, it will break. You need a javascript to fill your grid and resize your cells or at least update the grid-template/rows/columns if you are going to use display:grid. grid-template-rows:repeat(x,1fr); grid-template-columns:repeat(x,1fr) , where x is the value to update once the number of cells is counted and orientation checked. height and width can also be reset instead using vmin values unless 1fr from the templates is also updated – G-Cyrillus Sep 26 '19 at 13:21

1 Answers1

0

So in the end due to no other suggestions I went the way I didn't want to from the start - achieving it through @HostListener('window:resize') and field size calculation logic according to board orientation.

Dedemonn
  • 128
  • 10