如何在CSS Grid中将元素居中对齐到最后一行？

Question

我正在使用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 Grids也可以使用吗？

- fightstarr20

---

有用的文章：https://zellwk.com/blog/responsive-grid-system/ - bhansa

不，我不这么认为，除非你知道剩余物品的数量。然后，您可以添加一系列CSS规则来调整column-start。但是，当剩余物品数量是奇数时，应该发生什么？ - Paulie_D

@fightstarr20 我认为CSS网格不适用于此-它是一个二维布局。在你的例子中，你有一个沿着一个维度流动的布局-所以使用flexbox... - kukkuz

Answer 1

CSS Grid不适合用于整行对齐，因为交错的轨道会阻挡对齐。下面是详细说明：

• 如何使网格项目整行/整列对齐（像弹性盒子一样）

作为替代方案，可以使用带有justify-content: center的弹性盒子。

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

在完全填充的行上，justify-content将没有任何效果，因为没有空闲空间可供其工作。

在有空余空间的行上（在您的情况下，仅为最后一行），项目居中对齐。

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

- Michael Benjamin

Answer 2

发现一篇关于如何使用伪选择器控制剩余网格项的好文章：Control Leftover Grid Items with Pseudo-selectors

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
  margin: 20px;
  padding: 20px;  
}
.item {
  grid-column: span 2;
  background: #AB47BC;
  padding: 20px;
}

/* Dealing with 2 orphan items */

.item:last-child:nth-child(3n - 1) {
  grid-column-end: -2;
}

.item:nth-last-child(2):nth-child(3n + 1) {
  grid-column-end: 4;
}

/* Dealing with single orphan */

.item:last-child:nth-child(3n - 2) {
  grid-column-end: 5;
}

<div class="wrapper">
    <div class="grid grid--1">
        <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>

    <div class="grid grid--2">
        <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>
</div>

- Taras

Answer 3

那就违背了网格系统的目的。网格是一个二维数组，其中每个元素都有一个X值和一个Y值，就像电子表格一样。

是的，您需要一个可以自动换行的系统。Flexbox非常适合这种情况，因为它具有flex-wrap属性。

#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 属性，容器及其项目将自动调整大小。这也可以，但我假设您想定义每行的项目数量。

- JackHasaKeyboard

---

这是一个很好的解释，说明为什么网格布局不符合原帖作者的要求。它真的应该有更高的评分！ - Ilya Streltsyn

这就是为什么不应该将Grid和Flexbox对立起来。它们都有各自的使用场景。 - Michael Giovanni Pumo

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

- Asons

Answer 5

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

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

- Jalal

---

这似乎是将一行拉伸到100%的宽度。此外，在动态情况下，您不知道哪些项目在最后一行。 - Kalnode

当物品数量固定且响应良好时，功能完美。 - DrGo

Answer 6

我真的希望找到一个不会在元素上产生外边距的解决方案，而是使用gap。我只是将行间距乘以所需行上的项目数量，然后从宽度中减去。就这样。

我知道这不是CSS网格布局，但是flexbox实际上更适合交错行的情况。

:root {
  --marginXBase: 10px;
  --marginYBase: 10px;
}
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  align-content: flex-start;
  gap: var(--marginXBase) var(--marginYBase);
  outline: 1px solid black;
}
.item {
  background-color: blue;
  min-height: 15px;
  /* default to 3up */
  flex: 0 0 calc(33.33% - (var(--marginXBase) * 2) / 3);
}
.x-2up {
  background-color: green;
  flex: 0 0 calc(50% - (var(--marginXBase) * 1) / 2);
}
.x-4up {
  background-color: red;
  flex: 0 0 calc(25% - (var(--marginXBase) * 3) / 4);
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<br>

<div class="container">
  <div class="item x-2up"></div>
  <div class="item x-2up"></div>
  <div class="item x-2up"></div>
</div>

<br>

<div class="container">
  <div class="item x-4up"></div>
  <div class="item x-4up"></div>
  <div class="item x-4up"></div>
  <div class="item x-4up"></div>
  <div class="item x-4up"></div>
  <div class="item x-4up"></div>
  <div class="item x-4up"></div>
</div>

- plankguy

Answer 7

我发现了一个很棒但简单的解决方案，使用flexbox CSS。

#container {
  display: flex;
  justify-content: center;
  /*You can also try, justify-content: space-around; */
  flex-wrap: wrap;
}

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

- mhasan

Answer 8

对于网格项

grid-column: 1/-1;
margin: 0 auto;

- Ethan Amara

Answer 9

Codepen

  <div class="grid grid-cols-3 justify-items-center gap-2">
    <div class="w-5">1</div>
    <div class="w-5">2</div>
    <div class="w-5">3</div>
    <div class="w-5">4</div>
    <div class="w-5">5</div>
    <div class="w-5">6</div> 
    <div class="w-5">7</div>
    <div class="w-5">8</div>
    <div class="w-5">9</div>
    <div class="col-span-3">0</div>
 </div>

.col-span-3 {
  grid-column: span 3 / span 3;
}

.grid {
  display: grid;
}

.w-5 {
  width: 1.25rem;
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.justify-items-center {
  justify-items: center;
}

.gap-2 {
  gap: 0.5rem;
}

- Kostia

---

如果容器数量不固定，这并不能解决问题。 - PhobosFerro

项：last-child { 网格列：跨度3 / 跨度3; } - Kostia

那仍然没有解决问题。例如，当您想要将最后一个元素居中时，它在有10个元素时看起来很好。但当有11个元素时，您会发现第10个元素独自在左列，而最后一个元素在其下方的中心位置上，这样看起来就不好了。 https://jsfiddle.net/juh7stvp/14/ - PhobosFerro

Answer 10

我没有在网格方面工作过，但据我所知，如果你想使用 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>

如果有用，请感激使用。如果没有用，请忽略。

- Mohammed Wahed Khan