html - 在自动填充容器中居中网格元素

Question

我设置了一个包含两个元素的网格。此网格可以包含任意数量的元素，但对于此示例来说两个就足够了。

背景

在示例中，有两个灰色框向左对齐。在宽屏(大于 1000 像素)上使用检查器，我们可以发现第三个(或更多)“阴影”元素，它填满了剩余的空间。

问题

如何让方框在网格中居中？就像“影子”元素不存在一样。

在 .grid 元素上，我仍然想使用网格，因为我不需要编写自动媒体查询。在 wrapper 上，一切皆有可能。

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

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

fiddle

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

Answer 1

flex 盒子

您的问题最有效的解决方案可能是 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 默认是 block 级元素。这意味着它占据其父元素的 100% 宽度。因此 div 不能居中(除非您覆盖默认设置)。

---

结构

网格中的列和行延伸到整个容器。因此，假设 auto-fill 创建三列后，所有后续行都将具有三列。

如果第一行有三个网格项，第二行有两个网格项，则第二行仍有第三列穿过(并占用空间)。因此，第二行的两项不能在线居中。

---

自动填充

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

使用自动填充，当没有网格项来填充所有创建的轨道时，这些轨道将被保留。基本上，网格布局保持固定，有或没有元素。

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

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

---

自动适应

auto-fit 关键字与 auto-fill 的作用相同，不同之处在于:折叠空轨道。

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

同样，不可能居中，但这一次是因为 fr 单元占用了所有可用空间(如上面的 1fr 部分所述)。

---

对齐内容:居中

如上所述，无法将网格元素居中，因为该行上没有可用于对齐目的的可用空间。

解决此问题的一种方法(仍然允许灵活的列大小)是使用 max-content 而不是 1fr，以及 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