CSS响应式正方形网格

Question

我正在创建一个棋盘游戏，我想在其中显示一个始终适合屏幕高度和/或宽度 100% 的方 block 板(滚动条永远不会出现)，因此它应该在垂直和水平方向上负责.行数和列数是动态的。

另外，看板应该根据是否有更多的行或列来显示来改变它的方向。关于我要实现的目标的图像概述:

水平方向(大屏幕):

水平方向(小屏幕):

垂直方向:

我想如果我知道如何使其中一个完全响应，那么另一个方向就不会成为问题。

这是我的代码结构片段，正如您所期望的那样非常标准(Angular 生成的):

我尝试使用的解决方案如下 http://bluecaret.com/blog/responsive-grid-of-squares 对我来说不够充分。网格要么没有正确地跨越屏幕宽度/高度(这些 vw/vh 数字对我来说真的没有意义)要么只在一个方向上响应良好。

我乐于接受有关使用 flex/bootstrap/纯 CSS 的建议。

这是第一个我没能在无限时间内解决的 CSS 问题.. :|

Answer 1

所以最后由于没有其他建议，我从一开始就走上了我不想走的路 - 通过 @HostListener('window:resize') 和根据板方向的字段大小计算逻辑实现它。