How to make such a chess field adaptive?

Question

css

There is such a chess layout https://jsfiddle.net/Swartex/4g7m5u9b/ I want to make adaptability, you can use Bootstrap. But when it comes to adaptability, I don’t know how to do it, because trI can’t insert . It seems to me that I did not correctly make this layout with chess blocks. I ask for your advice. <div class="row"></div>

Answer 1

https://codepen.io/MaximLensky/pen/yzqKNX?editors=1000 checkmate... 100% responsive table
https://codepen.io/MaximLensky/pen/dVjdOd?editors=1100 second option... yours

Answer 2

https://codepen.io/dubrowsky/pen/oGMomN
This is certainly not your task, but on flexboxes from a flat list, true-adaptive remains chess with an even number of columns, and I remembered how to program in LESS :)

Answer 3

Top tip: Don't use tables, what should be responsive

Answer 4

It is better to make it up with flexes, not tables.
Somehow so . It turned out somehow not particularly chess at some resolutions, but I don’t particularly imagine how it should look