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>

列表项

Answer 2

在区域

中居中图片

＆＃13;

#result-images {
    border: 2px solid #fffff;
    border-radius: 5px;
    background-color: #959595;
}

#result-images {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a a a ."
    ". a a a a .";
}
img {
  grid-area: a;
  align-self: center;
  justify-self: center;
  width: 100px;
  height: 100px;
}

＆＃13;

<div id="result-images">
 <img src="https://c1.staticflickr.com/2/1018/805106121_ab84d1a216_b.jpg" />
</div>

＆＃13;

当没有足够的数据填充整行

2 个答案: