如何利用 CSS Grid 布局解决列数不足和元素宽度不一致问题？

如何在 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 布局解决列数不足和元素宽度不一致问题？的详细内容，更多请关注硕下网其它相关文章！