有幾個部件：網格與具有變化的高度和寬度的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樣式來做到這一點。
