了解高级前端开发工程师都在使用的grid-template-columns属性，它到底有什么神奇的作用？

4 min read

是的，我们可以使用CSS的grid-template-columns属性来定义网格容器中的列。通过使用grid-template-columns属性，我们可以设置网格容器内每列的大小和数量。其详细用途如下：

  1. 确定网格容器中各列的大小及数量。
  2. 支持使用绝对和相对大小。
  3. 可以使用 fr 关键字来分配可用空间的比例。
  4. 可以使用像素或百分比指定列大小，也可以结合使用。

示例：

如下示例，我们定义了一个网格容器，其中有三列。第一列宽度为100像素，第二列宽度为占用80%宽度的百分比，第三列为剩余可用空间的三分之一。

.grid-container {
  display: grid;
  grid-template-columns: 100px 80% 1fr;
}