我正在使用CSS网格来布局这样的项目......
#container {
display: grid;
grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}
.item {
background: teal;
color: white;
padding: 20px;
margin: 10px;
}Run Code Online (Sandbox Code Playgroud)
<div id="container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>Run Code Online (Sandbox Code Playgroud)
如何让最后一行居中而不是左对齐?我不能保证项目的数量,所以想要使布局看起来适合任意数量的项目.
这是我应该使用flexbox吗?或者CSS网格是否合适?