有几个部件：网格与具有变化的高度和宽度的div [萨斯，CSS，ReactJS]
- ，其接收定义的高度和宽度的网格。现在它的默认值是 ，宽度= 12，高度是无限的。
Box组件的双数组，其索引对应于网格上的点 。这些盒子基本上是具有高度和宽度 属性的div。高度= 3，高度= 4，宽度= 4，宽度= 1等等。方框 保留其原始内容，并沿着它们的区域 保存真正的存储值。这种情况的一个例子， 音符的代码是用于演示目的，可能并不语法 正确：
网格宽度= 4，高度= 4
BoxArray = [
框宽度= 3，高度= 2，content =“Box1”，
Boxwidth = 2，height = 1，content =“Box2”，
Boxwidth = 2，height = 2，content =“Box3”，
Box width = 2，height = 1，content =“Box4”，
Box width = 1，height = 2，content =“Box5”
]
该数组被转换为看起来像这样的双数组。双数组意识到屏幕大小调整，并且在将来我计划添加基于屏幕大小生成行和列的功能。空单元格的值为null。
[BOX1，真实，真实的，了Box5]
[真，真实的，真实的，真]
[BOX2，真实，BOX3，真]
[Box4，真实，真实的，真]
这应该被渲染到页面这样的：Correct Image 这是它实际上是如何获取呈现：Actual Image 我已经看过了各种解决方案，包括引导，Flexbox的，现在目前suzzy。我似乎无法找到一种解决方案，可以适应各种不同尺寸的盒子，然后渲染盒子，尽管网格上的各种位置都有不同的宽度和尺寸。如果任何人有任何资源，他们建议我应该看看或任何教程，以模块化的方式处理我的问题，我将不胜感激。我对萨斯很新，但我相信大部分这一切都是由sass处理得更好。此外，如果有人知道将数据发送给Sass的方式非常棒，我希望能够直接对通过React生成的值进行样式设置。我似乎只能用inline css样式来做到这一点。
