Untitled

CSS3 布局 - grid-column 简写属性教程

什么是 grid-column 属性？

grid-column 是 CSS Grid 布局中的简写属性，用于同时设置网格项目的 grid-column-start 和 grid-column-end 值。它允许您在一个声明中定义网格项目在水平方向上的起始和结束位置，使代码更加简洁。

语法

grid-column: <start-line> / <end-line>;

其中：

<start-line>: 定义网格项目的起始列线（可以是数字、名称或关键字）
<end-line>: 定义网格项目的结束列线（可以是数字、名称或关键字）

取值说明

取值类型	描述	示例
数字	使用网格线编号	`grid-column: 1 / 3;`
名称	使用命名的网格线	`grid-column: sidebar-start / content-start;`
关键字	使用特殊关键字	`grid-column: 1 / span 2;`
auto	自动定位	`grid-column: auto / auto;`

代码示例

示例 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-column 属性示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .grid-item {
            padding: 20px;
            text-align: center;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
        }
        .item1 {
            grid-column: 1 / 3; /* 从第1条线开始，到第3条线结束，跨越2列 */
        }
        .item2 {
            grid-column: 3 / 5; /* 从第3条线开始，到第5条线结束，跨越2列 */
        }
        .item3 {
            grid-column: 1 / 2; /* 从第1条线开始，到第2条线结束，跨越1列 */
        }
        .item4 {
            grid-column: 2 / 5; /* 从第2条线开始，到第5条线结束，跨越3列 */
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">项目 1 (跨越 2 列)</div>
        <div class="grid-item item2">项目 2 (跨越 2 列)</div>
        <div class="grid-item item3">项目 3 (跨越 1 列)</div>
        <div class="grid-item item4">项目 4 (跨越 3 列)</div>
    </div>
</body>
</html>

示例 2：使用命名网格线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-column 命名网格线示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
            grid-gap: 10px;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .grid-item {
            padding: 20px;
            text-align: center;
            background-color: #2196F3;
            color: white;
            border-radius: 5px;
        }
        .sidebar {
            grid-column: sidebar-start / sidebar-end;
        }
        .content {
            grid-column: content-start / content-end;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item sidebar">侧边栏</div>
        <div class="grid-item content">主内容区域</div>
    </div>
</body>
</html>

示例 3：使用 span 关键字

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid-column span 示例</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .grid-item {
            padding: 20px;
            text-align: center;
            background-color: #ff9800;
            color: white;
            border-radius: 5px;
        }
        .item1 {
            grid-column: 1 / span 2; /* 从第1条线开始，跨越2列 */
        }
        .item2 {
            grid-column: span 3 / 5; /* 跨越3列，到第5条线结束 */
        }
        .item3 {
            grid-column: span 2; /* 自动定位，跨越2列 */
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">项目 1 (跨越 2 列)</div>
        <div class="grid-item item2">项目 2 (跨越 3 列)</div>
        <div class="grid-item item3">项目 3 (跨越 2 列)</div>
        <div class="grid-item">项目 4</div>
        <div class="grid-item">项目 5</div>
    </div>
</body>
</html>

布局图示

以下是 grid-column 属性的布局示意图：

┌─────────────────────────────────────────────┐
│                     Grid                    │
├───────┬───────┬───────┬───────┬───────┬─────┤
│       │       │       │       │       │     │
│  1    │  2    │  3    │  4    │  5    │  6  │ ← 列线编号
│       │       │       │       │       │     │
├───────┼───────┼───────┼───────┼───────┼─────┤
│       │       │       │       │       │     │
│       │       │       │       │       │     │
│       │       │       │       │       │     │
│       │       │       │       │       │     │
├───────┼───────┼───────┼───────┼───────┼─────┤

当使用 grid-column: 1 / 3; 时，项目会占据从第1条列线到第3条列线之间的区域，跨越2列。

实际应用场景

场景 1：创建响应式页面布局

<!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>
        .container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-gap: 20px;
            padding: 20px;
        }
        .header {
            grid-column: 1 / -1; /* 从第1条线到最后一条线，跨越所有列 */
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .sidebar {
            grid-column: 1 / 4; /* 占据前3列 */
            background-color: #f4f4f4;
            padding: 20px;
        }
        .main {
            grid-column: 4 / -1; /* 从第4列到最后一列 */
            background-color: #e8e8e8;
            padding: 20px;
        }
        .footer {
            grid-column: 1 / -1; /* 跨越所有列 */
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
            margin-top: 20px;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .sidebar {
                grid-column: 1 / -1; /* 在小屏幕上跨越所有列 */
            }
            .main {
                grid-column: 1 / -1; /* 在小屏幕上跨越所有列 */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">网站标题</div>
        <div class="sidebar">
            <h3>侧边栏</h3>
            <ul>
                <li>导航项 1</li>
                <li>导航项 2</li>
                <li>导航项 3</li>
            </ul>
        </div>
        <div class="main">
            <h2>主内容区域</h2>
            <p>这里是网站的主要内容...</p>
        </div>
        <div class="footer">版权所有 © 2023</div>
    </div>
</body>
</html>

场景 2：创建复杂的卡片布局

<!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>
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 20px;
            padding: 20px;
        }
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .card.featured {
            grid-column: span 2; /* 特色卡片跨越2列 */
        }
        .card-header {
            background-color: #3498db;
            color: white;
            padding: 15px;
        }
        .card-body {
            padding: 15px;
        }
        @media (max-width: 768px) {
            .card.featured {
                grid-column: span 1; /* 在小屏幕上只占1列 */
            }
        }
    </style>
</head>
<body>
    <div class="card-grid">
        <div class="card featured">
            <div class="card-header">特色产品</div>
            <div class="card-body">
                <h3>高级套餐</h3>
                <p>包含所有功能，适合专业用户</p>
            </div>
        </div>
        <div class="card">
            <div class="card-header">基础套餐</div>
            <div class="card-body">
                <h3>入门级</h3>
                <p>适合个人用户和小型项目</p>
            </div>
        </div>
        <div class="card">
            <div class="card-header">专业套餐</div>
            <div class="card-body">
                <h3>企业级</h3>
                <p>适合大型企业和团队协作</p>
            </div>
        </div>
        <div class="card">
            <div class="card-header">定制套餐</div>
            <div class="card-body">
                <h3>按需定制</h3>
                <p>根据您的具体需求定制方案</p>
            </div>
        </div>
    </div>
</body>
</html>

浏览器兼容性

浏览器	支持版本
Chrome	57+
Firefox	52+
Safari	10.1+
Edge	16+
IE	不支持

总结

grid-column 简写属性是 CSS Grid 布局中非常实用的工具，它允许您：

在一个声明中同时设置网格项目的起始和结束列位置
使用数字、命名网格线或关键字来定义位置
通过 span 关键字轻松指定项目跨越的列数
创建复杂的响应式布局，适应不同屏幕尺寸
编写更简洁、更易维护的代码

练习作业

基础练习：创建一个 3x3 的网格布局，使用 grid-column 属性让第一个项目跨越所有列。
进阶练习：创建一个响应式页面布局，包含头部、侧边栏、主内容和页脚，使用 grid-column 属性实现不同屏幕尺寸的布局调整。
挑战练习：创建一个产品展示页面，使用 grid-column 属性实现特色产品卡片跨越多列的效果，并确保在移动设备上正确显示。

扩展阅读

通过本教程，您应该已经掌握了 grid-column 简写属性的使用方法，能够在 Grid 布局中灵活控制项目的水平位置和跨度。结合其他 Grid 属性，您可以创建出更加复杂和美观的网页布局。