如何在CSS网格的最后一行居中？

问题描述 投票：18回答：6

我正在使用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;
}
<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>

如何使最后一行居中而不是左对齐？我不能保证项目的数量，因此想要使布局对于任何数量的项目看起来都正确。

这是我应该使用flexbox代替的东西吗？还是CSS网格适合使用？

html css css3 flexbox css-grid
6个回答
12
投票

CSS Grid不适合在整行中对齐，因为纵横交错的轨道阻碍了道路。这是详细的说明：

或者，将flexbox与justify-content: center一起使用。

这会将所有项目打包在该行的水平中心。然后您的边距将它们分开。

在完全填充的行上，justify-content自there's no free space for it to work起将无效。

在具有可用空间的行（在您的情况下，仅最后一行）上，项目居中。

#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>
6
投票

这违反了网格系统的目的。网格是一个二维数组，其中所有元素都具有X和Y值，例如电子表格。

是的，您需要一个包装物品的系统。由于flex-wrap，Flexbox符合要求。

#container {
  padding: 10px;
  width: calc((100px + (10px * 2)) * 4); /* item width + padding on either side times number of items */
  display: flex;
  flex-wrap: wrap;
  background: blue;
  margin: 10px;
}

#container div {
  width: 100px;
  height: 100px;
  flex-grow: 1;
  background: red;
  margin: 10px;
}

https://jsfiddle.net/0c0hzh8t/

这将使子项占据所有可用空间，如果该行已满，则将为空，并将为其标准大小。

如果要自动调整容器的大小，请删除width属性，然后将自动调整容器及其项目的大小。也一样，但是我假设您想连续定义项目的数量。

4
投票

没有使上一行与上一行表现不同的特定属性。

仍然，基于您定义与视口宽度内的n个项目相匹配的设置宽度的事实，您可以使用Flexbox及其justify-content属性。

将其设置为center，它将使最后一行居中放置任意数量的项目。

堆栈片段

html, body {
  margin: 0;
}

#container {
  display: flex;
  flex-wrap: wrap;                  /*  allow items to wrap  */
  justify-content: center;          /*  horizontally center items  */
}

.item {
  flex-basis: calc(16.666% - 20px); /*  subtract the margin from the width  */
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
  box-sizing: border-box;           /*  make padding be included in the set width  */
}
<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>
4
投票

这应该在不使用flex的情况下将行中的任何项居中

.center-item {
    grid-column: 1 / -1;
}
-1
投票

我在网格上工作不多，但据我所知，如果您想使用Flex-box，请使用此代码。

#container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
 }

.item {
  flex: 1;
  flex-basis: 16.66%;
  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>

如果有用，请感谢。如果不是，请忽略。

-1
投票

这是我的解决方案（截至2018年4月23日）：

#wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 0;
  grid-column-gap: 15px;
  padding: 15px 15px 0 15px;
}

.item {
  border: 1px solid #000;
  height: 200px;
  margin-bottom: 15px;
}
<div style="width: 100%; margin: 0 auto; text-align: center; vertical-align: middle;">
  <div style="overflow: auto; height: 400px; margin-top: 15px;">
    <div style="position: relative">
      <div id="wrapper">
        <div class="item"><div>Item 1</div></div>
        <div class="item"><div>Item 2</div></div>
        <div class="item"><div>Item 3</div></div>
        <div class="item"><div>Item 4</div></div>
        <div class="item"><div>Item 5</div></div>
        <div class="item"><div>Item 6</div></div>
        <div class="item"><div>Item 7</div></div>
        <div class="item"><div>Item 8</div></div>
      </div>
      <div style="position: absolute; bottom: -30px; text-align: center; margin: 0 auto; width: 100%;">
        <div style="background-color: #defabc; width: 300px; margin: 0 auto; text-align: center; cursor: pointer;">
          <span style="color: #000;">See all items</span>
        </div>
      </div>
    </div>
  </div>
</div>

它的作用是，您可以将项目定位到网格包装器最底部的中心。同样，与所有其他解决方案一样，您不能在网格包装中放置任何内容以使其在最后一行居中对齐。

但是至少这是一个很好的替代解决方案，作为解决方法。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.