React JS display an array of objects to fit the screen

Question

I am new to JS and styling everything but I have created a component that takes in a variety of text from a txt document as well as a slew of images.

In my app.js, I am using a loop to input all of my data and create a list of objects. When I return the list, everything displays spaced vertically, but I would like the elements to display side by side if the browser can handle it.

If I have 15 elements and 3 of them can fit side by side on the screen, it would be 3 columns of 5, otherwise 2 columns would be contain 8 elements and 7 elements and so on and so forth.

I know of both flex boxes and react grid, but after experimenting I haven't had luck.

Does anyone have any advice?

Code Sandbox

you need to show code this types of questions will get you blocked from asking try to organize your self , show code , make a sandbox , debug your code and then state your issue... I mean it in a good way. — Richardson, Dec 13 '22 at 02:00
I added a code sandbox link, please let me know if it does not work. — Jimmy Sommer, Dec 13 '22 at 02:36

score 0 · Answer 1 · answered Dec 13 '22 at 02:04

0

If you wrote all you need in the description above, one way to create a grid of elements that will automatically adjust to the size of the browser is to use CSS Flexbox. With Flexbox, you can create a container element that holds all of your items, and then use the display: flex and flex-wrap: wrap properties to automatically arrange the items in a flexible grid. I think it's that simple.

answered Dec 13 '22 at 02:04

mmelotti

336
3
11

In my app.css, I have display:flex; and flex-wrap:wrap; Is there anything else I should need to get it to work? – Jimmy Sommer Dec 13 '22 at 02:58
@JimmySommer I would have to see it to confirm it. Can you edit your question? – mmelotti Dec 13 '22 at 14:34
@mnelotti I had already added it to the original post – Jimmy Sommer Dec 15 '22 at 00:07

React JS display an array of objects to fit the screen

1 Answers1