自动填充和自动调整之间有什么区别? [英] What is the difference between auto-fill and auto-fit?

问题描述

我正在使用CSS网格来实现卡片网格布局.

I'm working with CSS grids to achieve a card grid layout.

但是我不太了解如何调整minmax()语句来处理用例，这些用例中没有足够的项目来填充一行，但仍然需要它们看起来像卡片！

But I don't quite know how to tweak the minmax() statement to handle use cases where there aren't enough items to fill a row but still need them to look like cards!

如果我将最大1fr值替换为静态100px，或者使用小数0.25fr，则会在较小的介质尺寸下缩放比例.

If I replace the max 1fr value with a static 100px or I use a fractional 0.25fr it upsets the scaling at smaller media sizes.

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-column-gap: 17px;
  grid-row-gap: 25.5px;
  padding-bottom: 25.5px;
}
.card {
  background-color: #000;
  height: 100px;
}

<div class="wrapper">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

然后如果只有几个项目

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-column-gap: 17px;
  grid-row-gap: 25.5px;
  padding-bottom: 25.5px;
}
.card {
  background-color: #000;
  height: 100px;
}

<div class="wrapper">
  <div class="card"></div>
  <div class="card"></div>
</div>

推荐答案

关键是使用auto-fill而不是auto-fit.

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

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

请注意，在渲染网格容器时，网格项的存在无关紧要.容器只是按照指示布置列和行，从而创建网格单元.不管细胞是被占用还是未被占用.

Note that as the grid container is being rendered, the presence of grid items is irrelevant. The container just lays out the columns and rows as instructed, creating grid cells. It doesn't care if the cells are occupied or unoccupied.

对于auto-fit，当没有足够的网格项来填充创建的轨道数时，这些空轨道将被折叠.

With auto-fit, when there are not enough grid items to fill the number of tracks created, those empty tracks are collapsed.

以您的代码为例，当没有足够的网格项来填充行中的所有列时，这些空列将被折叠.空列使用的空间变为可用空间，然后将其平均分配到现有项目中.通过吸收可用空间，这些项将增长为填满整个行.

Taking your code as an example, when there aren't enough grid items to fill all the columns in the row, those empty columns are collapsed. The space that was used by the empty columns becomes free space, which is then evenly distributed among existing items. By absorbing the free space, the items grow to fill the entire row.

对于auto-fill，所有内容与auto-fit相同，不同之处在于未折叠空轨道.他们被保留.基本上，无论有无项目，网格布局都保持不变.

With auto-fill, everything is the same as auto-fit, except empty tracks are not collapsed. They are preserved. Basically, the grid layout remains fixed, with or without items.

这是auto-fill和auto-fit之间的唯一区别.

That's the only difference between auto-fill and auto-fit.

以下是使用auto-fill的三个网格项的图示:

Here's an illustration of three grid items with auto-fill:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

以下是使用auto-fit的三个网格项的图示:

Here's an illustration of three grid items with auto-fit:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

规范参考: https://www.w3.org/TR/css3-grid-layout/#auto-repeat

这篇关于自动填充和自动调整之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！