迄今为止，CSS 网格中最著名的代码行是
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));无需任何媒体查询，这将设置一个具有灵活列数的网格容器。这些列会稍微拉伸，直到有足够的空间容纳另一个列，然后添加一个新列，反之亦然。
这里唯一的缺点是 minmax() 中的第一个值（上面的 10rem 值）。如果容器比该最小值窄，则该单列中的元素将溢出。Evan Minto 使用 min() 为我们展示了解决方案
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));浏览器支持尚未普及，但 Evan 演示了一些渐进增强技术，可以立即利用它们。
可能应该存在一种更简单、更简洁的语法来处理这种常见用例。也许在 Grid Layout Level 2 中…
有趣，但我敢肯定，我并不是唯一一个觉得“这里唯一的缺点是 minmax() 中的第一个值（上面的 10rem 值）。” 实际上并非该技术的唯一缺点的人。
相反，这是最后一排网格项目不可避免的行开始对齐（最后一排除非完全填充，否则永远不会居中）——想想一个画廊。链接文章中的图形方便地展示了完全填充的最后一排，因此没有很好地说明这个问题，但这在很多情况下并非如此。例如：https://codepen.io/mikegleeson/pen/EqmWPm
我希望网格中有一些东西可以“知道”最后一排应该居中。考虑到这更多是 Flexbox 的事情，并且有点违背了网格的本质，我有点怀疑是否可以通过不确定的行数和最后一排中的项目来实现，但我仍然抱有希望。
哦，对于大多数用例来说，auto-fit 应该比 auto-fill 更合适。