I am having an array list which prises of image url. I want to bind each items into a div using react-bootstrap(library is not contraint but it should be patible with react). I want to align divs in a way that in each row I will have 3 images only and if there is 4th item in collection then it slides to next row.

Below is the collection

const images = [
    {
      src:
        ';auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 1000,
    },
    {
      src:
        ';auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 666,
      height: 1000,
    },
    {
      src:
        ';auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 844,
    },
{
      src:
        ';auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 1000,
    },
    {
      src:
        ';auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 666,
      height: 1000,
    }
  ]
 

I am having an array list which prises of image url. I want to bind each items into a div using react-bootstrap(library is not contraint but it should be patible with react). I want to align divs in a way that in each row I will have 3 images only and if there is 4th item in collection then it slides to next row.

Below is the collection

const images = [
    {
      src:
        'https://images.unsplash./photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 1000,
    },
    {
      src:
        'https://images.unsplash./photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 666,
      height: 1000,
    },
    {
      src:
        'https://images.unsplash./photo-1491146179969-d674118945ff?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 844,
    },
{
      src:
        'https://images.unsplash./photo-1509420316987-d27b02f81864?dpr=1&auto=format&fit=crop&w=1500&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 1500,
      height: 1000,
    },
    {
      src:
        'https://images.unsplash./photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 666,
      height: 1000,
    }
  ]
 

• javascript
• html
• reactjs
• user-interface

• Should they be resized to have the same height/width? How should they be aligned? Usually I would simply do this with flexbox. – ShamPooSham Commented Oct 28, 2021 at 14:48

2 Answers 2

I would make a wrapping Div with display: flex.

<div id="img-wrapper">
 <div><img src="your image" /></div>
 <div><img src="your image" /></div>
</div>

CSS:

#img-wrapper {
 display: flex;
 flex-wrap: wrap;
}

#img-wrapper > div {
 flex: 0 1 33%;
}

flex: tells the child-div if it should grow, shrink and which size it should have:

flex: "flex-grow" "flex-shrink" "flex-basis";

edit: as Baruch Mashasha stated, grid would be even better for this.

put all the images inside container and use grid

.container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-row-gap: 10px;
}

img {
       width: 200px;
       height: 200px;
}