After analyzing the issue, I have come up with a solution that I believe will work.
To begin, I would utilize CSS Grid for this task. If you are not familiar with it, you can refer to this guide: https://css-tricks.com/snippets/css/complete-guide-grid/
The first step would be to set the parent element's width and height to adjust dynamically based on the device being used. Then, apply the following properties to the parent: display: grid;,
grid-template-rows: repeat(#, 1fr);
, and
grid-template-columns: repeat(#, 1fr);
. Here, '#' represents the number of rows or columns. The 'fr' unit evenly divides available space among all columns/rows that need it. For example, in a parent element that is 100px wide with two child divs each set to 1fr, both divs will get 50px each.
If you insert the correct number of child divs within the parent, the grid should automatically fill accordingly. In case it doesn't, you may need to manually assign
grid-area: rowNum / colNum / span 1 / span 1;
to them.
You can group all the divs in a row with a class and then use .rowOne:nth-child(even) to create a chessboard pattern alternating between white and black squares.
To target a specific tile, you can use .rowOne:nth-child(tilenumber) and customize as needed.
Feel free to reach out if you found this explanation helpful or if there was any misunderstanding regarding your initial question :)