自动填充和自动拟合有什么区别？
我正在使用CSS网格工作以实现卡网格布局。
但是我不太知道如何调整minmax（）语句以处理没有足够的项目来填充行但仍然需要它们看起来像卡片的用例！
如果我用静态100px替换最大1FR值，或者使用分数0.25FR，则在较小的媒体尺寸下缩放缩放。
.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>I'm working with CSS grids to achieve a card grid layout.
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!
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>And then if there are only a couple items
.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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
关键是使用
自动填充而不是auto-fit。当
重复（）函数设置为auto-fit或auto-fill时，网格容器会创建随着许多网格轨道的创建（列/行）尽可能不溢出容器。请注意，随着网格容器的渲染，网格项目的存在无关紧要。容器只是按照指示列出列和行，创建网格单元。它不在乎细胞是被占据还是空闲的。
使用
Auto-Fit，当没有足够的网格项来填充创建的曲目数时，这些空音轨就会折叠。以您的代码为例，如果没有足够的网格项来填充行中的所有列，则这些空列会折叠。空列使用的空间变成了自由空间，然后将其均匀分布在现有项目之间。通过吸收自由空间，物品生长以填补整个行。
使用
自动填充，一切都与auto-fit相同，除了没有折叠空的轨道。他们被保存了。基本上，网格布局保持固定，有或没有项目。这是
自动填充和auto-fit之间的唯一区别。这是带有
auto-fill的三个网格项目的插图：这是带有
auto-fit的三个网格项目的插图：规格参考： https://www.w.w3.org/tr /css3-Grid-layout/＃自动重复
The key is to use
auto-fillinstead ofauto-fit.When the
repeat()function is set toauto-fitorauto-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.
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.
With
auto-fill, everything is the same asauto-fit, except empty tracks are not collapsed. They are preserved. Basically, the grid layout remains fixed, with or without items.That's the only difference between
auto-fillandauto-fit.Here's an illustration of three grid items with
auto-fill:Here's an illustration of three grid items with
auto-fit:spec reference: https://www.w3.org/TR/css3-grid-layout/#auto-repeat
简而言之，
自动拟合：适合整个容器长度。
自动填充：不符合整个Contaier的长度。
In Short,
Auto-fit: Fit entire length of container.
Auto-fill: Doesn't fit entire length of the contaier.
使用MinMax（）函数时，自动拟合关键字将展开网格项目以填充可用空间。虽然自动填充将保留可用的空间，而不会更改网格项目的宽度。
When using minmax() function, the auto-fit keyword will expand the grid items to fill the available space. While auto-fill will keep the available space reserved without altering the grid items width.