CSS grid-template-columns 语法
在 CSS 中，grid-template-columns 属性用于定义网格布局中的列结构（列数和列宽）。
语法：
grid-template-columns: none | 值列表 | 函数;说明：
grid-template-columns 属性的默认值是 none，此时表示没有显式定义的列。网格将仅创建隐式网格列，其尺寸由 grid-auto-columns 属性决定。
grid-template-columns 取值可以是一个值列表，还可以是一个 CSS 函数（一般是 repeat()）。如果 grid-template-columns 取值为 “值列表” ，此时每个值代表的是一个列的宽度。有多少个列，就应该提供多少个值，比如：
grid-template-columns: 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr;其中，对于值列表的每个值来说，它的值可以是：
- 长度值：比如 px、em、rem、百分比（%）等。
- fr 值：fr 是一个弹性单位，表示可用空间的比例。比如 grid-template-columns: 1fr 2fr; 表示两列，第二列是第一列宽度的两倍。
- min-content：列的宽度将根据其内容所需的最小宽度来确定，即内容不换行时的最小宽度。
- max-content：列的宽度将根据其内容所需的最大宽度来确定，即内容完整显示所需的最大宽度。
- auto：弹性宽度，类似于 fr，但会优先考虑内容的固有尺寸。在与其他 fr 单位结合时，auto 会在分配剩余空间前占用其内容的 max-content 宽度。
如果 grid-template-columns 取值为 “函数” ，此时它是使用 repeat() 函数来结合 auto-fill、auto-fit 关键字以及 minmax() 函数，主要用于创建响应式和自适应的列。
注意:
- grid-template-columns 属性用于网格容器本身，即定义了 display 取值为 grid 或 inline-grid 的元素。
- grid-template-columns 通常需要搭配 grid-template-rows、grid-template-areas 等属性一起使用。
CSS grid-template-columns 摘要
| 属于 | CSS grid 布局 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | none |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS grid-template-columns 示例
接下来，我们通过几个简单的例子来讲解一下 CSS grid-template-columns 属性是如何使用的。
示例 1：grid-template-columns 使用固定数值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
width: 300px;
height: 300px;
background-color: lightskyblue;
}
.container > div {
box-sizing: border-box;
border: 1px dashed gray;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
……
}display: grid; 表示父元素内部使用的是 grid 布局。grid-template-columns: 100px 100px 100px; 表示将整个区域定义成 3 列，每一列宽度为 100px。
grid-template-rows: 100px 100px 100px; 表示将整个区域定义成 3 行，每一行高度为 100px。由于父元素的尺寸为 300px×300px，所以刚好划分为 3×3 个子项（单元格）。
示例 2：grid-template-columns 使用 fr 单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 300px;
height: 300px;
background-color: skyblue;
}
.container > div {
box-sizing: border-box;
border: 1px dashed gray;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
grid-template-columns: 1fr 1fr 1fr; 表示将父元素宽度平均分为 3 列，由于父元素的 width 等于 300px，所以每一列宽度为 100px。而 grid-template-rows: 1fr 1fr 1fr; 表示将父元素高度平均分为 3 行，由于父元素的 height 也为 300px，所以每一行高度为 100px。
对于这个例子来说，下面两种写法是等价的。但写法 1 简单方便很多，因为它无需手动计算每一列的宽度或每一行的高度。
/* 写法 1 */
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* 写法 2 */
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;示例 3：左右两列固定宽度，中间列自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: grid;
grid-template-columns: 100px 1fr 100px;
height: 100px;
}
.item-1, .item-3 {
background-color: lightskyblue;
}
.item-2 {
background-color: hotpink;
}
</style>
</head>
<body>
<div class="container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
想要实现 “两列固定、中间自适应” 这种布局方式，使用 grid 布局实现很简单，只需要在使用 grid-template-columns 属性时，设置左右两列为固定值，中间列为 1fr 或 auto 即可。
