CSS grid-template-columns 属性-代码号

CSS ：grid-template-columns 属性详解

概述

CSS Grid Layout（网格布局）是现代网页设计中的强大工具，它提供了二维布局能力。grid-template-columns 属性是网格系统的核心组成部分，用于定义网格容器中的列数量和大小。本教程将深入探讨这一属性的使用方法、应用场景和实践。

基本语法

.grid-container {
  display: grid;
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
}

其中 <track-size> 可以是：

长度值（px, em, rem等）
百分比（%）
分数单位（fr）
关键字（auto, min-content, max-content）
函数（minmax(), repeat()）

基础用法示例

示例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>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            display: grid;
            grid-template-columns: 100px 200px 150px;
            gap: 10px;
            margin-bottom: 30px;
        }
        
        .item {
            background-color: #3498db;
            color: white;
            padding: 20px;
            border-radius: 4px;
            text-align: center;
        }
        
        .code-example {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Consolas', monospace;
            overflow-x: auto;
        }
        
        .explanation {
            background-color: white;
            padding: 20px;
            border-radius: 6px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>grid-template-columns 基础示例</h1>
    <p>使用固定宽度值定义网格列</p>
    
    <div class="container">
        <div class="item">100px</div>
        <div class="item">200px</div>
        <div class="item">150px</div>
    </div>
    
    <div class="code-example">
        .container {<br>
        &nbsp;&nbsp;display: grid;<br>
        &nbsp;&nbsp;grid-template-columns: 100px 200px 150px;<br>
        &nbsp;&nbsp;gap: 10px;<br>
        }
    </div>
    
    <div class="explanation">
        <h2>代码解释</h2>
        <p>此示例创建了一个三列网格：</p>
        <ul>
            <li>第一列宽度为100px</li>
            <li>第二列宽度为200px</li>
            <li>第三列宽度为150px</li>
        </ul>
        <p>这种布局方式适合需要精确控制列宽的场景。</p>
    </div>
</body>
</html>

示例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>代码号 - fr单位示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 10px;
            margin-bottom: 30px;
        }
        
        .item {
            background-color: #2ecc71;
            color: white;
            padding: 20px;
            border-radius: 4px;
            text-align: center;
        }
        
        .code-example {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Consolas', monospace;
            overflow-x: auto;
        }
        
        .explanation {
            background-color: white;
            padding: 20px;
            border-radius: 6px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>使用fr单位创建弹性布局</h1>
    <p>fr单位按比例分配可用空间，创建响应式布局</p>
    
    <div class="container">
        <div class="item">1fr</div>
        <div class="item">2fr</div>
        <div class="item">1fr</div>
    </div>
    
    <div class="code-example">
        .container {<br>
        &nbsp;&nbsp;display: grid;<br>
        &nbsp;&nbsp;grid-template-columns: 1fr 2fr 1fr;<br>
        &nbsp;&nbsp;gap: 10px;<br>
        }
    </div>
    
    <div class="explanation">
        <h2>代码解释</h2>
        <p>此示例创建了一个三列网格，使用fr单位分配空间：</p>
        <ul>
            <li>第一列占据1份可用空间</li>
            <li>第二列占据2份可用空间（是第一列的两倍）</li>
            <li>第三列占据1份可用空间</li>
        </ul>
        <p>fr单位非常适合创建响应式布局，能够自动适应不同屏幕尺寸。</p>
    </div>
</body>
</html>

高级用法示例

示例3：混合单位与minmax()函数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 混合单位与minmax()函数</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            display: grid;
            grid-template-columns: minmax(100px, 200px) 1fr minmax(150px, 250px);
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .item {
            background-color: #9b59b6;
            color: white;
            padding: 20px;
            border-radius: 4px;
            text-align: center;
        }
        
        .code-example {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Consolas', monospace;
            overflow-x: auto;
        }
        
        .explanation {
            background-color: white;
            padding: 20px;
            border-radius: 6px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>混合单位与minmax()函数</h1>
    <p>使用minmax()函数定义列的小和较大宽度，创建灵活且可控的布局</p>
    
    <div class="container">
        <div class="item">minmax(100px, 200px)</div>
        <div class="item">1fr</div>
        <div class="item">minmax(150px, 250px)</div>
    </div>
    
    <div class="code-example">
        .container {<br>
        &nbsp;&nbsp;display: grid;<br>
        &nbsp;&nbsp;grid-template-columns: minmax(100px, 200px) 1fr minmax(150px, 250px);<br>
        &nbsp;&nbsp;gap: 15px;<br>
        }
    </div>
    
    <div class="explanation">
        <h2>代码解释</h2>
        <p>此示例创建了一个三列网格，使用minmax()函数和fr单位：</p>
        <ul>
            <li>第一列宽度在100px到200px之间</li>
            <li>第二列占据剩余可用空间</li>
            <li>第三列宽度在150px到250px之间</li>
        </ul>
        <p>minmax()函数提供了灵活性，确保列在不同屏幕尺寸下都能保持良好的可读性。</p>
    </div>
</body>
</html>

示例4：repeat()函数与自动填充

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - repeat()函数与自动填充</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .item {
            background-color: #e74c3c;
            color: white;
            padding: 20px;
            border-radius: 4px;
            text-align: center;
            height: 100px;
        }
        
        .code-example {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Consolas', monospace;
            overflow-x: auto;
        }
        
        .explanation {
            background-color: white;
            padding: 20px;
            border-radius: 6px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>repeat()函数与自动填充</h1>
    <p>使用repeat()函数和auto-fill创建响应式网格布局</p>
    
    <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>
    
    <div class="code-example">
        .container {<br>
        &nbsp;&nbsp;display: grid;<br>
        &nbsp;&nbsp;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));<br>
        &nbsp;&nbsp;gap: 15px;<br>
        }
    </div>
    
    <div class="explanation">
        <h2>代码解释</h2>
        <p>此示例创建了一个自动填充的网格布局：</p>
        <ul>
            <li>auto-fill：自动填充可用空间，创建尽可能多的列</li>
            <li>minmax(200px, 1fr)：每列小宽度200px，较大为1份可用空间</li>
            <li>当容器宽度变化时，列数会自动调整</li>
        </ul>
        <p>这种布局非常适合图片库、产品列表等需要自适应列数的场景。</p>
    </div>
</body>
</html>

实际应用场景

示例5：响应式卡片布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 响应式卡片布局</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .courses-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .course-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .course-card:hover {
            transform: translateY(-5px);
        }
        
        .course-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .course-content {
            padding: 20px;
        }
        
        .course-title {
            margin: 0 0 10px 0;
            color: #2c3e50;
        }
        
        .course-description {
            color: #7f8c8d;
            margin: 0 0 15px 0;
            line-height: 1.5;
        }
        
        .course-meta {
            display: flex;
            justify-content: space-between;
            color: #95a5a6;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .courses-container {
                grid-template-columns: 1fr;
            }
        }
        
        .code-example {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Consolas', monospace;
            overflow-x: auto;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <h1>响应式卡片布局</h1>
    <p>使用grid-template-columns创建自适应课程卡片布局</p>
    
    <div class="courses-container">
        <div class="course-card">
            <img src="https://www.ebingou.cn/biancheng/images/1.jpg" alt="HTML5教程" class="course-image">
            <div class="course-content">
                <h3 class="course-title">HTML5基础教程</h3>
                <p class="course-description">学习现代HTML5语法和语义化标签，掌握网页结构基础。</p>
                <div class="course-meta">
                    <span>12课时</span>
                    <span>初级</span>
                </div>
            </div>
        </div>
        
        <div class="course-card">
            <img src="https://www.ebingou.cn/biancheng/images/2.jpg" alt="CSS教程" class="course-image">
            <div class="course-content">
                <h3 class="course-title">CSS布局实战</h3>
                <p class="course-description">深入学习Flexbox和Grid布局技术，创建现代网页布局。</p>
                <div class="course-meta">
                    <span>18课时</span>
                    <span>中级</span>
                </div>
            </div>
        </div>
        
        <div class="course-card">
            <img src="https://www.ebingou.cn/biancheng/images/3.jpg" alt="JavaScript教程" class="course-image">
            <div class="course-content">
                <h3 class="course-title">JavaScript进阶</h3>
                <p class="course-description">掌握JavaScript高级特性，包括异步编程和面向对象设计。</p>
                <div class="course-meta">
                    <span>24课时</span>
                    <span>高级</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="code-example">
        .courses-container {<br>
        &nbsp;&nbsp;display: grid;<br>
        &nbsp;&nbsp;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));<br>
        &nbsp;&nbsp;gap: 20px;<br>
        }<br>
        <br>
        @media (max-width: 768px) {<br>
        &nbsp;&nbsp;.courses-container {<br>
        &nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns: 1fr;<br>
        &nbsp;&nbsp;}<br>
        }
    </div>
</body>
</html>

示例6：仪表板布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码号 - 仪表板布局</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #34495e;
            color: white;
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: 250px 1fr 1fr;
            grid-template-rows: auto 1fr 1fr;
            gap: 20px;
            height: 90vh;
        }
        
        .header {
            grid-column: 1 / -1;
            background-color: #2c3e50;
            padding: 20px;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .sidebar {
            grid-row: 2 / -1;
            background-color: #2c3e50;
            padding: 20px;
            border-radius: 8px;
        }
        
        .main-content {
            grid-column: 2 / -1;
            grid-row: 2 / -1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 20px;
        }
        
        .widget {
            background-color: #2c3e50;
            padding: 20px;
            border-radius: 8px;
        }
        
        .widget-large {
            grid-column: 1 / -1;
        }
        
        .code-example {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 15px;
            border-radius: 6px;
            font-family: 'Consolas', monospace;
            overflow-x: auto;
            margin-top: 30px;
        }
        
        @media (max-width: 1024px) {
            .dashboard {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto 1fr;
            }
            
            .sidebar {
                grid-row: 2;
                grid-column: 1;
            }
            
            .main-content {
                grid-column: 1;
                grid-row: 3;
            }
        }
    </style>
</head>
<body>
    <h1>仪表板布局</h1>
    <p>使用grid-template-columns创建复杂的仪表板布局</p>
    
    <div class="dashboard">
        <header class="header">
            <h2>代码号学习平台仪表板</h2>
            <div>用户菜单</div>
        </header>
        
        <aside class="sidebar">
            <h3>导航菜单</h3>
            <ul>
                <li>课程学习</li>
                <li>进度跟踪</li>
                <li>项目实践</li>
                <li>社区交流</li>
            </ul>
        </aside>
        
        <main class="main-content">
            <div class="widget">
                <h3>学习进度</h3>
                <p>当前课程完成度: 75%</p>
            </div>
            <div class="widget">
                <h3>最新通知</h3>
                <p>CSS高级课程已更新</p>
            </div>
            <div class="widget widget-large">
                <h3>项目展示</h3>
                <p>查看其他学员的优秀项目</p>
            </div>
        </main>
    </div>
    
    <div class="code-example">
        .dashboard {<br>
        &nbsp;&nbsp;display: grid;<br>
        &nbsp;&nbsp;grid-template-columns: 250px 1fr 1fr;<br>
        &nbsp;&nbsp;grid-template-rows: auto 1fr 1fr;<br>
        &nbsp;&nbsp;gap: 20px;<br>
        &nbsp;&nbsp;height: 90vh;<br>
        }<br>
        <br>
        .header {<br>
        &nbsp;&nbsp;grid-column: 1 / -1;<br>
        }<br>
        <br>
        .sidebar {<br>
        &nbsp;&nbsp;grid-row: 2 / -1;<br>
        }<br>
        <br>
        .main-content {<br>
        &nbsp;&nbsp;grid-column: 2 / -1;<br>
        &nbsp;&nbsp;grid-row: 2 / -1;<br>
        &nbsp;&nbsp;display: grid;<br>
        &nbsp;&nbsp;grid-template-columns: 1fr 1fr;<br>
        &nbsp;&nbsp;grid-template-rows: 1fr 1fr;<br>
        &nbsp;&nbsp;gap: 20px;<br>
        }
    </div>
</body>
</html>

本节课程知识要点

基本语法：
- 使用grid-template-columns定义网格列
- 支持多种单位：px, %, fr, auto等
- 可以使用minmax()函数定义大小范围
响应式技术：
- 使用fr单位创建弹性布局
- 结合auto-fit/auto-fill和minmax()实现自动调整
- 使用媒体查询针对不同屏幕尺寸调整布局
实用函数：
- repeat()函数简化重复模式
- minmax()函数提供大小约束
- fit-content()函数根据内容调整大小
布局技巧：
- 使用命名网格线提高代码可读性
- 结合grid-column/grid-row实现复杂布局
- 使用gap属性控制网格间距
实际应用：
- 卡片布局使用auto-fit和minmax()
- 仪表板布局使用固定和弹性列组合
- 导航菜单使用等分列布局

本文标签：

CSS grid-template-columns 属性

CSS ：grid-template-columns 属性详解

概述

基本语法

基础用法示例

示例1：固定宽度列

示例2：使用fr单位创建弹性列

高级用法示例

示例3：混合单位与minmax()函数

示例4：repeat()函数与自动填充

实际应用场景

示例5：响应式卡片布局

示例6：仪表板布局

本节课程知识要点

感谢您的认可和支持