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

Question

我已经设置了一个包含两个项目的网格.此网格可以包含任意数量的项目,但对于此示例,这两个项目就足够了.

背景

在该示例中,有两个灰色框对齐左侧.在宽屏幕(1000px以上)上使用检查器,我们可以发现填充剩余空间的第三个(或更多)"阴影"项目.

题

如何将网格框放在中心？就像"影子"项目不存在一样.

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

Flexbox的

对您的问题最有效的解决方案可能是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默认情况下,A 是块级元素.这意味着它占据其父级的100%宽度.所以a div不能居中(除非你覆盖默认设置).

结构体

网格中的列和行在整个容器中延伸.所以一旦auto-fill创建,比方说,三列,所有后续行将有三列.

如果第一行有三个网格项而第二行​​有两个网格项,则第二行仍有第三列通过(和占用空间).因此,第二行中的两个项目不能以该行为中心.

auto-fill

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

随着auto-fill,当没有网格项目填补创建的所有曲目,这些曲目将被保留.基本上,网格布局保持固定,有或没有项目.

你在问题中指出了这一点.您有两个网格项,但也存在其他"阴影"项.请注意,这些"阴影"项不是网格项.它们只是空的网格单元格.

由于空的网格单元,没有剩余的空间用于使网格项居中.

auto-fit

该auto-fit关键字不一样auto-fill,除了这一点:空轨道倒塌.

在您的情况下,由于您已1fr在minmax()函数中设置为max-size ,因此额外空间将分布在两个网格项之间.

同样,居中是不可能的,但这次是因为该fr单元占用了所有可用空间(如上1fr节所述).

justify-content: center

如上所述,不可能使网格项居中,因为为了对齐目的,线上没有可用的空闲空间.

解决这个问题的一种方法是使用,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>

更多信息

• auto-fill和之间的区别auto-fit
• max-content 在规范中

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/