如何将元素放在CSS网格的最后一行？

问题描述

#container {display：grid; grid-template-columns：16.666％16.666％16.666％16.666％16.666％16.666％;} item {background：teal;白颜色; padding：20px; margin：10px;} < div id =container > < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item> Item< / div>< / div>

我怎样才能得到最后一排居中，而不是左对齐？我不能保证物品的数量，所以想要使布局看起来正确的任何数量的项目。

这是我应该使用flexbox代替？或者是CSS的网格是一个合适的使用？我认为最简单的解决方案将使用flexbox与 justify-content：center 。

这包所有行在水平中心的项目。然后你的利润率将它们分开。

在完全填充的行上， justify-content 一个href =https://stackoverflow.com/q/35817096/3597276>有没有可用的空间工作。

在行自由空间（在你的情况，只有最后一行），发生居中。

#container {display：flex; flex-wrap：wrap; justify-content：center;}。item {flex：0 0 calc（16.66％ - 20px）;背景：蓝绿色;白颜色; padding：20px; margin：10px;} * {box-sizing：border-box;}

 < div id =container> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item>项目< / div> < div class =item> Item< / div>< / div>  

I am using CSS grid to layout some items like this...

#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;
}

<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>

How can I get the last row to be centered instead of left aligned? I can't guarantee the number of items so want to make the layout look right for any number of items.

Is this something I should be using flexbox for instead? Or are CSS grids a suitable use?

解决方案

I think the simplest solution would be to use flexbox with justify-content: center.

This packs all items in the horizontal center of the row. Then your margins push them apart.

On fully-filled rows, justify-content will have no effect since there's no free space for it to work.

On rows with free space (in your case, only the last row), centering occurs.

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}

<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>

这篇关于如何将元素放在CSS网格的最后一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！