React JS + Material UI : displaying N elements inside a container of variable width

Question

What I'm trying to do should be something extremly simple but still I cannot seem to get it done right with Material UI (ReactJS): I have a Card element that shows some image, a title, a description and some buttons. This element has a FIXED width and height. I want to display N amount of this elements, one after each other, inside a container element who's WIDTH may vary. So, if the container element's width is 1000px and the Card elements are 250px, it will dispaly 4 Card elements in a row. And if I then set a width of 500px for the container, it should display 2 Card elements in a row and the other 2 below in a new row. About a decade ago when I was still doing html+css I used to do this using a DIV with a specific width and some other floated DIVs inside -also with fixed width- and it would render in this way I explained... I mean, the "overflow" from a row would automatcally go to the row below. I have tried many different things, I also searched for photo album tutorials and things like that and still can't get it done... How am I supposed to do this kind of things with Material UI and ReactJS? Thanks in advance! JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

You can deal with these kinds of problems using flex-box. Here I did a simple example just using a couple of properties that should fit our description: https://codesandbox.io/s/throbbing-cdn-cbb6mx?file=/src/App.js In this link, you can find a very nice guide about flex-box: https://css-tricks.com/snippets/css/a-guide-to-flexbox/