CSS Grid 中如何设置不同的列宽

在现代网页设计中，响应式布局已经变得越来越重要。而 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%，我们可以这样设置：

.grid {
  display: grid;
  grid-template-columns: 30% 20% 50%;
}

这样的语法非常简单，但相对地，每个单元格的宽度是固定的，而并不是自适应的。如果我们想要自适应宽度，我们可以利用 fr 单位值的分数来设置网格模板的列宽。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
}

这个例子中，每个单元格的宽度将自动根据可用空间进行调整。第一个和第二个单元格各占用网格模板的 25%，而第三个单元格则占用 50% 的可用空间。

结论

在这篇文章中，我们讨论了在 CSS Grid 中设置不同的列宽的方法。我们学习了如何利用 grid-template-columns 属性中的百分比和 fr 单位值的分数来实现自适应宽度，以及如何使用 repeat() 函数来创建复杂的网格模板。希望这篇文章可以帮助你更好地掌握 CSS Grid 布局，为你的响应式布局打下坚实的基础。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710a838377015f5a1a1f7d3