Css 如何在不同的网格列中渲染数组中的元素

我不确定以前是否有人问过这个问题。无论如何

TL；DR：我有一个包含图像URL的数组。如何使用URL（显示每个图像）呈现每个图像，如下所示（我当前的解决方案如下所示）：

我正在创建一个非Flash API图像检索React应用程序，我已经知道了如何获取照片，如何渲染它们等。我挠头的是：如何在网格中显示它们，有3列，没有定义行（我将在下面附上我的意思的屏幕截图）？我使用Axios执行get请求并在

中执行。然后

将响应记录在组件状态数组

（this.state.results

是一个数组）中，并使用map循环响应并获取url。基本上：

// the request
axios.get(url).then((response) => {
            this.setState({...this.state, spinning: false, results: response.data.results});
})

// the component render - this is the entire section where I will display the images.
// these are styled components
<ResultsSection>
   <ResultsDivGrid>
      <Spin indicator={loadIcon} tip='Loading photos...' spinning={this.state.spinning} style= 
            {{position: 'absolute', left: '50%'}}/>
                {
                   this.state.results.map(photo => {
                       console.log(photo);
                       return <ResultsPhoto src={photo.urls.regular} alt={photo.alt_description} />
                   })
                 }
  </ResultsDivGrid>
</ResultsSection>

//请求
获取（url）。然后（（响应）=>{
this.setState（{…this.state，spining:false，results:response.data.results}）；
})
//组件渲染-这是我将显示图像的整个部分。
//这些是样式化组件
{
this.state.results.map（照片=>{
控制台日志（照片）；
返回
})
}

这让我在网格中的图像很好。这就是我得到的：

---

尝试将其添加到网格容器中：

grid-auto-flow: dense;

---

不幸的是，它没有起作用。和以前一样。