如何在 css grid 布局中解决实际问题？
原始问题包含两个常见的 CSS Grid 布局问题：
问题 1：实现 1 行 5 列
原代码使用 grid-template-columns: repeat(auto-fill, 20%)，但不足以在 1 行中显示 5 个元素。解决方案是使用 repeat(auto-fit, calc()) 函数，该函数允许计算每一列的宽度，使其填充可用空间，并保留指定的列间距：
grid-template-columns: repeat(auto-fit, calc((100% - 4 * 20px) / 5));
登录后复制
问题 2：不足 5 个元素时 li 宽度增加
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: auto auto auto auto auto; 设置了 5 个自动列。当 li 数量不足 5 个时，自动列会吸收可用空间，导致 li 宽度增加。要解决此问题，可以使用 fr 单位，它根据可用空间分配列宽度：
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
登录后复制
以上就是如何利用 CSS Grid 布局解决列数不足和元素宽度不一致问题？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2801650.html
