css - 当没有足够的数据来填充整行时，网格布局中的中心元素

Question

我正在使用新的 CSS 网格布局，基本上我正在显示一系列图像，六列就可以了，我已经把那部分记下来了，但是内容有一个可变的数字，而且经常出现没有足够的内容来填满每一列，所以如果行中只有两个元素，我希望它们位于中间两列的中心。这是一个相对较新的 API，尽管我还没有看到我设法正常工作的类似内容。这是一些 CSS 示例，如果有什么地方看起来非常错误，请原谅我的无知。

#result-images{
display: grid;
grid-template-columns: 260px 260px 260px 260px 260px 260px;
grid-gap: 11px;
grid-column-gap:55px;
background-color: #959595;
border-style:solid;
border-width:3px;
border-color:#FFFFFF;

}

#result-images img{
width:100%;
height: 100%;
background-color: #363636;
display:block;
margin: 0 auto;
}

Answer 1

使用 Flexbox 实际上更容易实现这种输出。示例如下。

#result-images{
display:flex;
flex-flow: row wrap;
justify-content:center;
align-content:center;
align-items:center;
border: 2px solid black;
max-width:360px;
}

#result-images img{
min-width: 120px;
max-width: 120px;
min-height: 120px;
max-height: 120px;
flex: 0 1 auto
align-self:center;
}

<section id="result-images">

<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">
<img src="https://rack.pub/media/ronRoyston.png">


</section>

1. 列表项