我想使用 react 以 3*X 的网格方式显示图像

Question

我有一个包含图像 url 的数组列表。我想使用 react-bootstrap 将每个项目绑定到 div（库不是约束，但它应该与 react 兼容）。我想以一种方式对齐 divs，即在每一行中我将只有 3 张图像，如果集合中有第 4 个项目，则它会滑到下一行。

下面是合集

const images = [
    {
      src:
        'https://images.unsplash.com/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.com/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.com/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.com/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.com/photo-1509641498745-13c26fd1ed89?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
      width: 666,
      height: 1000,
    }
  ]

Answer 1

我会使用 Bootstrap 类为此创建一个网格，类似这样...

<div className="row">
 <div className="col"></div>
 <div className="col"></div>
 <div className="col"></div>
</div>

如果你想要另一排，你可以继续这个想法。您可以在此处查看：https://getbootstrap.com/docs/4.0/layout/grid/ 以获得更详尽的解释，并根据您的喜好进行自定义。

Answer 2

将所有图片放入容器中并使用网格

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

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

Answer 3

我会用 display: flex.

做一个包装 Div

<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：告诉 child-div 它是否应该增长、收缩以及它应该具有的大小：

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

编辑：正如 Baruch Mashasha 所说，网格对此会更好。

我想使用 react 以 3*X 的网格方式显示图像

I want to display images in a grid fashion of 3*X using react

html

javascript

user-interface

reactjs