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

有几个组成部分：

接收定义的高度和宽度的网格。目前它是默认的宽度= 12，高度是无限的。
一个Box数组的双数组，其索引对应于点在网格上。这些盒子基本上都是高度和宽度的div 属性。高度= 3，高度= 4，宽度= 4，宽度= 1等...框保持他们的内容在他们的原点和他们的区域他们保持真正的存储价值。这种情况的一个例子，请注意，该代码仅用于演示目的，可能不是语法上的正确的：

网格宽度= 4，高度= 4

BoxArray = [
Box width = 3，height = 2，content =＆＃34; Box1＆＃34;，
Box width = 2，height = 1，content =＆＃34; Box2＆＃34;，
Box width = 2，height = 2，content =＆＃34; Box3＆＃34;，
Box width = 2，height = 1，content =＆＃34; Box4＆＃34;，
Box width = 1，height = 2，content =＆＃34; Box5＆＃34;
]

此数组将转换为看起来像这样的double数组。双数组意识到屏幕大小调整，将来我计划根据屏幕大小添加生成行和列的功能。空单元格的值为null。

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

这应该像这样呈现给页面：Correct Image 这就是它实际呈现的方式：Actual Image 我已经看过各种解决方案，包括bootstrap，flexbox，现在已经过时了。我似乎无法找到一种解决方案，可以容纳各种不同尺寸的盒子，然后渲染盒子，尽管宽度不同，尺寸在网格上的各种位置。如果有人有任何资源，他们建议我应该看看或任何以模块化方式处理我的问题的教程我会非常感激。我是Sass的新手，但我相信大多数人都会被sass处理得更好。此外，如果有人知道将数据发送到Sass的方法会很棒，我希望能够直接设置通过React生成的值。我似乎只能用内联css样式做到这一点。

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

1 个答案: