在自动填充容器中居中网格项目

Question

我设置了一个包含两个项目的网格。这个网格可以包含任意数量的项目，但对于这个例子来说两个就足够了。

背景

在示例中，有两个灰色框对齐到左侧。在宽屏幕（超过 1000 像素）上使用检查器，我们可以发现第三个（或更多）“阴影”项目，该项目填满了其余空间。

问题

如何使网格中的框居中？就像“影子”项目不存在一样。

在.grid 元素上，我仍然想使用网格，因为我不需要编写自动媒体查询。在包装上，任何事情都会发生。

此外，固定宽度不是一个选项。

.wrap {
  display: flex;
  flex-direction: column;
  /*justify-content: center;
      align-items: center;*/
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 1rem;
}

.item {
  background: #eee;
}

<div class="wrap">
  <div class="grid">
    <div class="item">
      Item 1
    </div>
    <div class="item">
      Item 2
    </div>
  </div>
</div>

小提琴

https://jsfiddle.net/1ymkg327/4/

Answer 1

这是因为minmax设置的最大值太小了。

您需要将最大值设置为 50%。因为你有grid-gap:1rem 这变成了calc(50% - 1rem)。

看这个小提琴：

https://jsfiddle.net/1ymkg327/24/

编辑：

我现在理解了你的问题，并提出了解决方案：

https://jsfiddle.net/1ymkg327/40/

Answer 2

问题在于，使用auto-fill 会创建很多空列，这使得justify-items:center 的行为不像您期望的那样。

您需要改用auto-fit。

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 1rem;
    justify-items:center;
}

https://jsfiddle.net/1ymkg327/36/

Answer 3

弹性盒

最有效的解决方案可能是 flexbox，因为 flex 项并不像网格项那样局限于单个轨道（列/行）。

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.item {
  flex: 1 0 100px;
  background: #eee;
  text-align: center;
  border: 1px dashed gray;
  box-sizing: border-box;
}

<div class="grid">
  <div class="item">Item 1</div>
</div>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

但如果您想坚持使用网格布局，这里有一些需要考虑的问题和一个潜在的解决方案。

---

网格

1fr

当您说1fr 时，就像您在代码中所做的那样，这意味着“消耗所有可用空间”。但是当没有空闲空间时，就无法对齐。

关键字对齐属性（即justify-* 和align-*）通过分配可用空间来工作。它们不能左对齐、右对齐、space-between、space-around 或居中，没有可用空间。

这不仅仅是网格行为。它是标准的 HTML/CSS：div 默认是块级元素。这意味着它占据了其父级的 100% 宽度。所以div 不能居中（除非您覆盖默认设置）。

---

结构

网格中的列和行横跨整个容器。因此，一旦auto-fill 创建了三列，那么后面的所有行都将包含三列。

如果第一行有三个网格项，第二行有两个网格项，则第二行仍有第三列通过（并占用空间）。因此，第二行的两项不能居中。

---

auto-fill

当repeat()函数设置为auto-fill或auto-fit时，容器在不溢出容器的情况下创建尽可能多的网格轨迹。

使用auto-fill，当没有网格项目来填充所有创建的轨道时，这些轨道会被保留。基本上，网格布局保持固定，有或没有项目。

您在问题中指出了这一点。您有两个网格项目，但也存在其他“影子”项目。请注意，这些“影子”项目不是网格项目。它们只是空的网格单元。

由于网格单元为空，没有剩余空间可用于使网格项居中。

---

auto-fit

auto-fit 关键字与auto-fill 的作用相同，除了以下几点：空轨道折叠。

在您的情况下，由于您在 minmax() 函数中将 1fr 设置为最大尺寸，因此额外的空间将分布在两个网格项之间。

同样，居中是不可能的，但这一次是因为fr 单元正在消耗所有可用空间（如上面1fr 部分所述）。

---

justify-content: center

如上所述，将网格项目居中是不可能的，因为行上没有可用空间用于对齐目的。

解决此问题的一种方法是使用max-content 代替1fr，同时使用auto-fit 和auto-fit。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
  justify-content: center;
  grid-gap: 1rem;
}

.item {
  background: #eee;
}

<div class="grid">
  <div class="item">Item 1</div>
</div>

<hr>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

<hr>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<hr>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

---

更多信息

• The difference between auto-fill and auto-fit
• max-content in the spec