Grid with divs that have varying heights and widths [Sass, CSS, ReactJS]

Question

There are several components:

• A grid that receives a defined height and width. For now it's default is width=12 and height is infinite.

• A double array of Box Components whose indexes correspond to points on the grid. The boxes are basically divs that have height and width properties. height=3, height=4, width=4, width=1, etc... The boxes maintain their content at their origin point and along their area they maintain true values for storage. An example of this scenario, note the code is for demo purposes and may not be syntactically correct:

  Grid width=4, height=4

  BoxArray = [
  Box width=3, height=2, content="Box1",
  Box width=2, height=1, content="Box2",
  Box width=2, height=2, content="Box3",
  Box width=2, height=1, content="Box4",
  Box width=1, height=2, content="Box5"
  ]

This array gets converted into the double array that looks like this. The double array is aware of screen resizing and in the future I plan to add the capability of generating rows and columns based on the size of the screen. An empty cell would have value null.

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

This should be rendered to the page as such: Correct Image This is how it actually gets rendered: Actual Image I have looked at various solutions including bootstrap, flexbox, and now currently suzzy. I can't seem to find a solution that accommodates a changing array of boxes that can be all sorts of different sizes and then render the boxes despite the different width's and sizes being in all sorts of positions on the grid. If anyone has any resources they recommend I should look at or any tutorials that handle my issue in a modular way I would greatly appreciate it. I am pretty new to Sass but I believe moving the majority of this to be handled by sass the better. Also if anyone knows a way to send data to Sass that would be great, I would love to be able to style directly to values generated through React. I seem to only be able to do this with inline css styles.

Answer 1

I actually eventually solved this question. What I did required loops and recursion. The solution can be seen in this project. Eventually I am going to pull it out as it's own project and put it on npm for people to use if they want.

Solution