具有不同高度和宽度的 div 网格 [Sass, CSS, ReactJS]

Question

有几个组件：

• 接受定义的高度和宽度的网格。现在是默认的 是宽度=12，高度是无限的。

• 其索引对应于点的 Box Components 的 double 数组 在网格上。这些框基本上是具有高度和宽度的 div 特性。高度=3，高度=4，宽度=4，宽度=1，等等……盒子 在他们的起点和他们的区域保持他们的内容 它们保持真实的存储价值。这种情况的一个例子， 请注意，代码用于演示目的，可能不是语法 正确：

  网格宽度=4，高度=4

  BoxArray = [
  盒子宽度=3，高度=2，内容=“盒子1”，
  框宽度=2，高度=1，内容=“框2”，
  框宽=2，高=2，内容=“Box3”，
  框宽=2，高=1，内容=“Box4”，
  框宽=1，高=2，内容=“框5”
  ]

这个数组被转换成如下所示的双精度数组。双数组知道屏幕调整大小，并且在未来我计划添加基于屏幕大小生成行和列的功能。空单元格的值为 null。

[Box1,true,true,Box5]
[真，真，真，真]
[Box2,true,Box3,true]
[Box4,true,true,true]

这应该像这样呈现到页面：Correct Image 这就是它实际呈现的方式：Actual Image 我查看了各种解决方案，包括 bootstrap、flexbox 和现在的 suzzy。我似乎无法找到一种解决方案来适应不断变化的盒子数组，这些盒子可以是各种不同的大小，然后渲染这些盒子，尽管网格上的各种位置都有不同的宽度和大小。如果有人有他们推荐的任何资源，我应该查看或任何以模块化方式处理我的问题的教程，我将不胜感激。我对 Sass 很陌生，但我相信将其中的大部分交给 sass 处理会更好。此外，如果有人知道一种将数据发送到 Sass 的方法会很棒，我希望能够直接将样式设置为通过 React 生成的值。我似乎只能使用内联 css 样式来做到这一点。

Answer 1

我实际上最终解决了这个问题。我所做的需要循环和递归。解决方案可以在这个项目中看到。最终，我会将它作为自己的项目拉出来，并将其放在 npm 上供人们根据需要使用。

Solution