CSS3 布局 - grid-template-columns 属性

核心知识点

grid-template-columns 属性的语法和基本用法
grid-template-columns 的取值范围和单位
repeat() 函数的使用方法
fr 单位的工作原理
grid-template-columns 与其他Grid属性的配合使用

学习目标

掌握 grid-template-columns 属性的语法和取值
理解 repeat() 函数和 fr 单位的使用方法
能够创建不同类型的列布局
学会在复杂布局中灵活运用 grid-template-columns 属性

语法解析

grid-template-columns 属性用于定义Grid布局中列的大小和数量。

grid-template-columns: <track-list>;

取值说明

<track-list>：一个或多个轨道大小的列表，用空格分隔
- <length>：具体的长度值，如 px、em、rem 等
- <percentage>：相对于Grid容器宽度的百分比值
- <flex>：使用 fr 单位，表示可用空间的比例
- max-content：列宽由内容的最大宽度决定
- min-content：列宽由内容的最小宽度决定
- auto：列宽由内容决定，或根据其他列的宽度自动调整
- repeat()：重复指定的轨道大小模式

repeat() 函数

repeat(<count>, <track-size>);

<count>：重复的次数
<track-size>：轨道的大小，可以是单个值或多个值的列表

代码示例

示例1：使用具体长度值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-template-columns: 具体长度值 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 150px 120px;
            grid-template-rows: 80px 80px;
            gap: 10px;
            width: 400px;
            border: 2px solid #333;
            padding: 10px;
        }
        .item {
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目4</div>
        <div class="item">项目5</div>
        <div class="item">项目6</div>
    </div>
</body>
</html>

效果分析：创建了一个3列2行的Grid布局，列宽分别为100px、150px和120px。

示例2：使用fr单位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-template-columns: fr单位 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 80px 80px;
            gap: 10px;
            width: 100%;
            max-width: 600px;
            border: 2px solid #333;
            padding: 10px;
        }
        .item {
            background-color: #2196F3;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目4</div>
        <div class="item">项目5</div>
        <div class="item">项目6</div>
    </div>
</body>
</html>

效果分析：使用 fr 单位创建自适应宽度的Grid布局，中间列的宽度是两侧列的2倍。

示例3：使用repeat()函数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-template-columns: repeat() 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 80px);
            gap: 10px;
            width: 100%;
            max-width: 600px;
            border: 2px solid #333;
            padding: 10px;
        }
        .item {
            background-color: #FF9800;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目4</div>
        <div class="item">项目5</div>
        <div class="item">项目6</div>
    </div>
</body>
</html>

效果分析：使用 repeat() 函数创建了一个3列2行的Grid布局，每列宽度相等。

示例4：混合使用不同单位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-template-columns: 混合单位 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 1fr 2fr;
            grid-template-rows: 80px 80px;
            gap: 10px;
            width: 100%;
            max-width: 600px;
            border: 2px solid #333;
            padding: 10px;
        }
        .item {
            background-color: #9C27B0;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
        <div class="item">项目4</div>
        <div class="item">项目5</div>
        <div class="item">项目6</div>
    </div>
</body>
</html>

效果分析：混合使用 px 和 fr 单位，创建了一个固定宽度列和两个比例列的布局。

布局示意图

grid-template-columns: 100px 150px 120px

+-------------+---------------+-------------+
| [项目1]     | [项目2]       | [项目3]     |
| [项目4]     | [项目5]       | [项目6]     |
+-------------+---------------+-------------+

grid-template-columns: 1fr 2fr 1fr

+---------+---------------+---------+
| [项目1] | [项目2]       | [项目3] |
| [项目4] | [项目5]       | [项目6] |
+---------+---------------+---------+

grid-template-columns: repeat(3, 1fr)

+---------+---------+---------+
| [项目1] | [项目2] | [项目3] |
| [项目4] | [项目5] | [项目6] |
+---------+---------+---------+

grid-template-columns: 100px 1fr 2fr

+-------------+---------+---------------+
| [项目1]     | [项目2] | [项目3]       |
| [项目4]     | [项目5] | [项目6]       |
+-------------+---------+---------------+

实际应用场景

等宽列布局：当需要多个列宽度相等时，使用 repeat(n, 1fr)
固定宽度与自适应混合布局：当需要某些列固定宽度，某些列自适应时，混合使用 px 和 fr 单位
响应式布局：当需要在不同屏幕尺寸下调整列数时，结合媒体查询使用 grid-template-columns
内容自适应布局：当需要列宽由内容决定时，使用 max-content 或 min-content
复杂网格布局：当需要创建不规则的网格布局时，使用不同的列宽值

与其他Grid属性的配合

grid-template-rows：定义Grid布局中行的大小和数量
grid-template-areas：定义Grid布局中的命名区域
grid-column-gap / gap：定义列之间的间距
justify-items：控制Grid项目在列中的对齐方式

代码优化建议

性能考虑：grid-template-columns 在现代浏览器中性能良好，但在复杂布局中应合理使用
浏览器兼容性：所有现代浏览器都支持 grid-template-columns，但在旧版IE中不支持
代码简洁性：对于重复的列宽模式，使用 repeat() 函数简化代码
响应式设计：结合媒体查询，在不同屏幕尺寸下调整列数和列宽

实践练习

练习1：基础应用

创建一个4列的Grid布局，使用 repeat() 函数和 fr 单位，使每列宽度相等。

练习2：混合单位布局

创建一个Grid布局，包含：

第一列：固定宽度 120px
第二列：自适应宽度 1fr
第三列：自适应宽度 2fr

练习3：响应式布局

设计一个响应式Grid布局：

在大屏幕上显示4列
在中等屏幕上显示3列
在小屏幕上显示2列
在超小屏幕上显示1列

总结

grid-template-columns 属性是CSS3中定义Grid布局列结构的核心属性，通过设置不同的取值，你可以实现：

使用具体长度值创建固定宽度的列
使用 fr 单位创建自适应宽度的列
使用 repeat() 函数简化重复的列宽定义
混合使用不同单位创建复杂的列布局
使用 max-content 和 min-content 创建内容自适应的列

合理使用 grid-template-columns 属性，可以创建各种灵活的Grid布局，满足不同的设计需求。