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

时间：2018-03-27 13:52:52

标签： html css css3 centering css-grid

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

背景

在示例中，左侧有两个灰色框对齐。在宽屏幕（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/

3 个答案:

答案 0 :(得分：8)

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是块级元素。这意味着它占据其父级的100％宽度。因此div无法居中（除非您覆盖默认设置）。

结构

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

如果第一行有三个网格项而第二行​​有两个网格项，则第二行仍有第三列（并占用空间）。因此，第二行中的两个项目不能在该行的中心。

auto-fill

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

使用auto-fill时，如果没有网格项来填充所有创建的曲目，将保留这些曲目。基本上，网格布局保持固定，有或没有项目。

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

enter image description here

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

auto-fit

auto-fit关键字与auto-fill的关键字相同，除此之外：空曲目已折叠。

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

enter image description here

同样，无法居中，但这次是因为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>

更多信息

答案 1 :(得分：0)

问题在于，使用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/

答案 2 :(得分：-1)

因为grid-gap:1rem设置的最大值太小。

您需要将最大值设置为50％。因为您有calc(50% - 1rem)，所以 library(tidyverse) dat%>%unique()%>% group_by(A)%>% mutate(grp=paste0("area_",1:(n())))%>% spread(grp,B)%>% ungroup() # A tibble: 3 x 4 A area_1 area_2 area_3 * <dbl> <chr> <chr> <chr> 1 1423 Huiswaard Huiswaard-Noord Huiswaard-Zuid 2 1483 De Rijp De Rijp-Gracht <NA> 3 1811 Centrum Overdie <NA> 。

看到这个小提琴：

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

编辑：

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

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

相关问题
最新问题