css grid 布局中的难题

问题 1：

当使用 grid-template-columns: repeat(auto-fill, 20%); 时，如何让 .box1 中的元素在 1 行中显示 5 个？

问题 2：

当使用 grid-template-columns: auto auto auto auto auto; 时，如何在 .box2 中元素不足的情况下保持它们的宽度不变？

解决方案：

问题 1：

可以修改 grid-template-columns 属性：

grid-template-columns: repeat(auto-fit, calc((100% - 4 * 20px) / 5));