相关疑难解决方法(0)

如何将CSS Grid中最后一行的元素居中?

我正在使用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网格是否合适?

html css css3 flexbox css-grid

18
推荐指数
5
解决办法
8426
查看次数

标签 统计

css ×1

css-grid ×1

css3 ×1

flexbox ×1

html ×1