当每行有偶数个项目时，如何将网格最后一行的项目居中

Question

我需要一个每行包含 4 个项目的布局。它需要拉伸诸如弹性盒之类的项目以适合第一行。包裹物品时，物品尺寸应与第一行物品尺寸相同。最后，如果包裹的物品不能填满行，则应居中。项目数量可以是 1 到 n 之间的任意数字。

由于每行中有固定数量的项目，并且需要调整最后一行中项目的大小，因此网格布局最适合。但是，最后一个网格行中的项目居中的解决方案仅在每行中有奇数个项目或项目的宽度固定时才有效。

这是不满足居中要求的代码：

.my-container {
  display: grid;
  border: 1px solid black;
  padding: 1rem;
  margin: 2rem;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1.5rem;
}

.item {
  text-align: center;
  border: 1px solid red;
}

<div class="my-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Answer 1

我想我可以将列数加倍（从 4 到 8），并使每个项目跨越两列。这样，以下规则涵盖了最后一行的所有情况：

1. 对于最后一行中的孤行，向其左侧添加 3 个缩进。
2. 对于最后一行中的 2 个项目，在左侧添加 2 个缩进
3. 对于最后一行的 3 个项目，向其左侧添加 1 个缩进

/*for orphan in last row*/
.item:last-child:nth-child(4n+5) {
  grid-column-end: 6;
}
/*for two items in last row*/
.my-container:has(> .item:last-child:nth-child(4n+6)) .item:nth-last-child(2){
  grid-column-end: 5;
}
/*for three  items in last row*/
.my-container:has(> .item:last-child:nth-child(4n+7)) .item:nth-last-child(3){
  grid-column-end: 4;
}

接下来，如果容器中的项目少于 4 个，则使用 flex 来拉伸项目。

.my-container:has(.item:last-child:nth-child(-n+3)) {
  display: flex;
  gap: 1.5rem;
}
.my-container:has(.item:last-child:nth-child(-n+3)) .item {
  flex: 1;
}

这是修改后的代码：

.my-container {
  display: grid;
  border: 1px solid black;
  padding: 1rem;
  margin: 2rem;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 1.5rem;
}

.item {
  grid-column: span 2;
  text-align: center;
  border: 1px solid red;
}

.my-container:has(.item:last-child:nth-child(-n+3)) {
  display: flex;
  gap: 1.5rem;
}

.my-container:has(.item:last-child:nth-child(-n+3)) .item {
  flex: 1;
}


/*for orphan in last row*/
.item:last-child:nth-child(4n+5) {
  grid-column-end: 6;
}

/*for two items in last row*/
.my-container:has(> .item:last-child:nth-child(4n+6)) .item:nth-last-child(2) {
  grid-column-end: 5;
}

/*for three  items in last row*/
.my-container:has(> .item:last-child:nth-child(4n+7)) .item:nth-last-child(3) {
  grid-column-end: 4;
}

<div class="my-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="my-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">1</div>
</div>

<div class="my-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">6</div>
</div>