在自动填充容器中将网格项居中 [英] Centering grid items in an auto-fill container

问题描述

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

I have set up a grid with two items. This grid can contain any number of items but two is enough for this example.

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

In the example there are two gray boxes align to the left. Using an inspector on a wide screen (above 1000px) we can spot a third (or more) "shadow" item that fills up the rest of the space.

如何将框在网格中居中?就像影子"项目一样，该项目不存在.

How can I center the boxes in the grid? Like the "shadow" item(s) does not exist.

在.grid元素上，由于不需要编写自动媒体查询，我仍然想使用网格.在包装上，一切正常.

On the .grid element I still want to use a grid because of the automatic media queries I don't need to write. On the wrapper, anything goes.

此外，固定宽度不是一种选择.

Also, a fixed width is not an option.

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

推荐答案

Flexbox

解决问题的最有效方法可能是flexbox，因为弹性项目不限于网格项目之类的单个轨道(列/行).

Flexbox

The most efficient solution to your problem is probably flexbox, as flex items are not confined to individual tracks (columns/rows) like grid items.

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

但是，如果您要坚持使用网格布局"，则需要考虑一些问题和可能的解决方案.

But if you want to stick with Grid Layout, here are some issues to consider and a potential solution.

当您说1fr时，就像您在代码中所做的那样，这意味着消耗所有可用空间" .但是，如果没有可用空间，就不会对齐.

When you say 1fr, like you do in your code, that means "consume all free space". But when there is no free space, there can be no alignment.

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

Keyword alignment properties (i.e. justify-* and align-*) work by distributing free space. They cannot left-align, right-align, space-between, space-around or center, without free space.

这不仅仅是网格行为.它是标准的HTML/CSS:默认情况下，div是块级元素.这意味着它占据了其父级的100％宽度.因此，div不能居中(除非您覆盖默认设置).

This isn't just Grid behavior. It's standard HTML/CSS: A div is a block-level element by default. This means it occupies 100% width of its parent. So a div cannot be centered (unless you override the default settings).

网格中的列和行遍及整个容器.因此，假设auto-fill创建了三列，随后的所有行将具有三列.

Columns and rows in a grid extend across the entire container. So once auto-fill creates, let's say, three columns, all following rows will have three columns.

如果第一行具有三个网格项，第二行具有两个网格项，则第二行上仍然有第三列经过(并占用空间).因此，第二行中的两个项目不能在该行上居中.

If the first row has three grid items and the second row has two grid items, there is still a third column going through (and occupying space) on the second row. Therefore, the two items in the second row cannot be centered on the line.

当repeat()功能设置为auto-fill或auto-fit时，容器将创建尽可能多的网格轨迹，而不会溢出容器.

When the repeat() function is set to auto-fill or auto-fit, the container creates as many grid tracks as possible without overflowing the container.

使用auto-fill，当没有网格项可填充创建的所有轨道时，那些轨道将被保留.基本上，无论有无项目，网格布局都保持不变.

With auto-fill, when there are no grid items to fill all tracks created, those tracks are preserved. Basically, the grid layout remains fixed, with or without items.

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

You pointed this out in your question. You have two grid items, but other "shadow" items also exist. Just note that these "shadow" items are not grid items. They are just empty grid cells.

由于网格单元格为空，因此没有可用空间来使网格项居中.

Because of the empty grid cells, there is no free space left for centering the grid items.

auto-fit关键字与auto-fill相同，不同之处在于:空轨道已折叠.

The auto-fit keyword does the same as auto-fill, except for this: empty tracks are collapsed.

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

In your case, since you have 1fr set as the max-size in the minmax() function, the extra space is distributed among both grid items.

同样，无法居中，但这是因为fr单元正在消耗所有可用空间(如上面1fr部分所述).

Again, centering is not possible, but this time because the fr unit is consuming all free space (as explained in the 1fr section above).

如上所述，由于无法在线上进行对齐，因此无法将网格项居中.

As described above, centering the grid items is not possible because there is no free space available on the line for alignment purposes.

解决此问题的一种方法(仍允许灵活的列大小)是使用max-content而不是1fr以及auto-fit.

One way around this, which still allows for flexible column sizes, is to use max-content instead of 1fr, along with 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规格

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

这篇关于在自动填充容器中将网格项居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！