CSS Grid 布局疑难解答：如何实现特定行数元素显示和保持元素宽度不变？

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));

问题 2：

可以使用 minmax() 函数设置元素的最小和最大宽度：

grid-template-columns: repeat(auto-fill, minmax(0px, auto));

以上就是CSS Grid 布局疑难解答：如何实现特定行数元素显示和保持元素宽度不变？的详细内容，更多请关注硕下网其它相关文章！