Javascript 如何在react中显示3行数据？

我有12个博客如何在react中显示3行4列的博客片段？ 我已经在下面尝试过了，但内容只是以列为中心

下面是jsx

 {Data.map((item) => {
                    return (
                        <div key={item.id} className='div-style'>
                            <div>
                                <img src={item.image} alt="img" width='300' height="200"></img>
                            </div>
                            <div>
                                <h2>{item.header}</h2>
                            </div>
                            <div>
                                <p>{item.pargraph}</p>
                            </div>
                        </div>
                    )
                })
                }

---

您需要为博客添加一个容器div（只需在运行array

map（）

method之前添加一个div），然后您就可以像这样更新css了：

.div容器{
显示器：flex；
证明内容：之间的空间；
柔性包装：包装；
}
.div容器>.div样式{
弹性：120%；
保证金：5px；
高度：50px；
}
.div样式{
背景色：#aaa；
边框：1px实心#777；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

Is

div style

这里是单个博客的容器吗？你想让其中12个像3行4列一样显示吗？使用reactstrap或bootstrap对你来说会更容易是的，它是@palasH。

.div-style{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}