[英]I want to display images in a grid fashion of 3*X using react
I am having an array list which comprises of image url.我有一个包含图像 url 的数组列表。 I want to bind each items into a div using react-bootstrap(library is not contraint but it should be compatible with react).
我想使用 react-bootstrap 将每个项目绑定到一个 div(库不受约束,但它应该与 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.
我想以一种方式对齐 div,在每一行中我将只有 3 个图像,如果集合中有第 4 个项目,则它会滑动到下一行。
Below is the collection下面是合集
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,
}
]
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;
}
I would make a wrapping Div with display: flex.我会用 display: flex 制作一个包装 Div。
<div id="img-wrapper">
<div><img src="your image" /></div>
<div><img src="your image" /></div>
</div>
CSS: 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: 告诉 child-div 它是否应该增长、收缩以及它应该具有的大小:
flex: "flex-grow" "flex-shrink" "flex-basis";弹性:“弹性增长”“弹性收缩”“弹性基础”;
edit: as Baruch Mashasha stated, grid would be even better for this.编辑:正如 Baruch Mashasha 所说,网格会更好。
I would use Bootstrap classes to create a grid for this, something like this...我会使用 Bootstrap 类为此创建一个网格,就像这样......
<div className="row">
<div className="col"></div>
<div className="col"></div>
<div className="col"></div>
</div>
If you want to have another row you can just keep going with this idea.如果你想要另一排,你可以继续这个想法。 You can check here: https://getbootstrap.com/docs/4.0/layout/grid/ for a more thorough explanation, and to customize to your liking.
您可以在此处查看: https : //getbootstrap.com/docs/4.0/layout/grid/以获得更详尽的解释,并根据您的喜好进行自定义。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.