在现代网页设计中，响应式布局已经变得越来越重要。而 CSS Grid 则成为了前端开发人员实现响应式布局的有力工具之一。然而，如何设置不同列宽却是困扰许多前端开发人员的问题。在本篇文章中，我们将会讨论如何在 CSS Grid 中设置不同的列宽。
CSS Grid 基础
在 CSS Grid 中，我们利用 grid-template-rows 和 grid-template-columns 属性来指定网格模板的列和行。这两个属性可以接受的值包括：
- 固定单位值，如
px、rem、em等； - 百分比，指相对于其容器的百分比值。例如，
50%的宽度表示该列或行的宽度是其容器的一半； - 使用 fr 单位值的分数，这个值指定了该列或行占用可用空间的比例。例如，
1fr表示该列或行占用了可用空间中的 1 份，而2fr则表示该列或行占用可用空间的 2 份。
需要注意的是，当使用 fr 单位值的分数时，CSS Grid 会自动计算可用空间以确定每个单元格的大小。另外，我们还可以使用 repeat() 函数来轻松地创建复杂的网格模板。
设置不同的列宽
当我们要在 CSS Grid 中设置不同的列宽时，可以利用 grid-template-columns 属性中的百分比和 fr 单位值的分数来实现。如果我们需要三列分别占据整个网格模板的 30%、20% 和 50%，我们可以这样设置：
----- - -------- ----- ---------------------- --- --- ---- -
这样的语法非常简单，但相对地，每个单元格的宽度是固定的，而并不是自适应的。如果我们想要自适应宽度，我们可以利用 fr 单位值的分数来设置网格模板的列宽。
----- - -------- ----- ---------------------- --- --- ---- -
这个例子中，每个单元格的宽度将自动根据可用空间进行调整。第一个和第二个单元格各占用网格模板的 25%，而第三个单元格则占用 50% 的可用空间。
结论
在这篇文章中，我们讨论了在 CSS Grid 中设置不同的列宽的方法。我们学习了如何利用 grid-template-columns 属性中的百分比和 fr 单位值的分数来实现自适应宽度，以及如何使用 repeat() 函数来创建复杂的网格模板。希望这篇文章可以帮助你更好地掌握 CSS Grid 布局，为你的响应式布局打下坚实的基础。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710a838377015f5a1a1f7d3