As you can see, we return a row of columns that double as items and containers, so they behave accordingly. Currently, I’m developing this as a desktop version, so I set the lg property of each column to 12 divided by the number of columns since Material-UI measures 1 full screen as 12 units. This way, the columns always fill the designated container. To make it more dynamic, I can set the xs prop to that value, and change the number of columns dynamically with screen width. If you’re creating something similar, I’d recommend that approach!

Sorting Columns & Rows

I had to create a function that could be called each time a column’s data needed to be created, and would only grab the appropriate set of data from a JSON array sent from the back-end. If you approach this linearly you get some issues. For example, say we have a 3 column grid and 9 posts in our JSON array. If we wanted to figure out which posts belonged in row 2, we could have a conditional like this:

if (itemIndex % 2 === 0) { … } //Put item in column 2

With this logic, operating linearly in our columns (i.e. starting at column 1 and iterating to the 3rd), you’d run into an issue where article 6 would end up in column 2, instead of the third column where it belonged. For this reason, I decremented from the last column to the first, removing any possibility of wrongly sorted data.