CSS Display Grid布局 grid-template-columns grid-template-rows

CSS Grid项目放置的几种主要方法：

使用网格线编号 ：通过grid-column-start、grid-column-end、grid-row-start和grid-row-end属性明确指定项目起始和结束的网格线
简写方式 ：使用grid-column和grid-row简写属性，语法为[start] / [end]
span关键字 ：使用span关键字指定项目跨越的轨道数量，而不是指定结束线
网格线示意图：页面底部展示了网格线编号系统，帮助你理解网格布局的定位原理

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 项目放置 - 精确控制位置</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            text-align: center;
            color: white;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .description {
            text-align: center;
            color: white;
            margin-bottom: 40px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 150px);
            gap: 15px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .grid-item {
            border-radius: 8px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .item1 {
            background-color: #ff6b6b;
            /* 使用网格线编号放置项目 */
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 2;
        }
        
        .item2 {
            background-color: #4ecdc4;
            /* 简写方式：grid-column: [start] / [end]; grid-row: [start] / [end]; */
            grid-column: 3 / 5;
            grid-row: 1 / 3;
        }
        
        .item3 {
            background-color: #ffd166;
            /* 使用span关键字表示跨越的轨道数 */
            grid-column: 1 / span 2;
            grid-row: 2 / span 2;
        }
        
        .item4 {
            background-color: #06d6a0;
            grid-column: 3 / 4;
            grid-row: 3 / 4;
        }
        
        .item5 {
            background-color: #118ab2;
            grid-column: 4 / 5;
            grid-row: 3 / 4;
        }
        
        .code-example {
            background-color: #2d3436;
            color: #f5f6fa;
            padding: 25px;
            border-radius: 8px;
            margin-top: 30px;
            font-family: 'Fira Code', monospace;
            overflow-x: auto;
        }
        
        .code-example h3 {
            color: #dfe6e9;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .comment {
            color: #636e72;
        }
        
        .property {
            color: #81ecec;
        }
        
        .value {
            color: #fab1a0;
        }
        
        .grid-lines {
            position: relative;
            margin-top: 50px;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 8px;
        }
        
        .grid-lines h3 {
            color: white;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .line-diagram {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 80px);
            gap: 10px;
            position: relative;
            background-color: rgba(255, 255, 255, 0.05);
            padding: 10px;
            margin-top: 20px;
        }
        
        .line-number {
            position: absolute;
            color: white;
            font-size: 12px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        .line-number.col {
            bottom: -25px;
        }
        
        .line-number.row {
            right: -30px;
        }
        
        .line-demo-item {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(5, 150px);
            }
            .grid-item {
                grid-column: 1 / 2 !important;
                grid-row: auto !important;
            }
            .line-diagram {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(5, 60px);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>CSS Grid 项目放置示例</h1>

        <p class="description">
            通过网格线精确控制项目位置。每个项目使用<code>grid-column</code>和<code>grid-row</code>属性指定其在网格中的位置。
        </p>

        <div class="grid-container">
            <div class="grid-item item1">
                <h3>项目 1</h3>
                <p>grid-column: 1 / 3;</p>
                <p>grid-row: 1 / 2;</p>
            </div>
            <div class="grid-item item2">
                <h3>项目 2</h3>
                <p>grid-column: 3 / 5;</p>
                <p>grid-row: 1 / 3;</p>
            </div>
            <div class="grid-item item3">
                <h3>项目 3</h3>
                <p>grid-column: 1 / span 2;</p>
                <p>grid-row: 2 / span 2;</p>
            </div>
            <div class="grid-item item4">
                <h3>项目 4</h3>
                <p>grid-column: 3 / 4;</p>
                <p>grid-row: 3 / 4;</p>
            </div>
            <div class="grid-item item5">
                <h3>项目 5</h3>
                <p>grid-column: 4 / 5;</p>
                <p>grid-row: 3 / 4;</p>
            </div>
        </div>

        <div class="grid-lines">
            <h3>网格线编号示意图</h3>
            <p style="text-align: center; color: white; margin-bottom: 15px;">
                CSS Grid 使用线编号系统来定位项目，从1开始（也可以从末尾开始使用负数）
            </p>

            <div class="line-diagram">
                <div class="line-demo-item">1</div>
                <div class="line-demo-item">2</div>
                <div class="line-demo-item">3</div>
                <div class="line-demo-item">4</div>
                <div class="line-demo-item">5</div>
                <div class="line-demo-item">6</div>
                <div class="line-demo-item">7</div>
                <div class="line-demo-item">8</div>
                <div class="line-demo-item">9</div>
                <div class="line-demo-item">10</div>
                <div class="line-demo-item">11</div>
                <div class="line-demo-item">12</div>

                <!-- 列线编号 -->
                <span class="line-number col" style="left: 0;">1</span>
                <span class="line-number col" style="left: 25%;">2</span>
                <span class="line-number col" style="left: 50%;">3</span>
                <span class="line-number col" style="left: 75%;">4</span>
                <span class="line-number col" style="left: 100%;">5</span>

                <!-- 行线编号 -->
                <span class="line-number row" style="top: 0;">1</span>
                <span class="line-number row" style="top: 33%;">2</span>
                <span class="line-number row" style="top: 66%;">3</span>
                <span class="line-number row" style="top: 100%;">4</span>
            </div>
        </div>

        <div class="code-example">
            <h3>代码解析</h3>
            <pre><code><span class="comment">/* 网格容器定义 */</span>
.grid-container {
    <span class="property">display</span>: <span class="value">grid</span>;
    <span class="property">grid-template-columns</span>: <span class="value">repeat(4, 1fr)</span>;  <span class="comment">/* 4列 */</span>
    <span class="property">grid-template-rows</span>: <span class="value">repeat(3, 150px)</span>;  <span class="comment">/* 3行，每行150px */</span>
    <span class="property">gap</span>: <span class="value">15px</span>;
}

<span class="comment">/* 项目1：从第1条列线到第3条列线，从第1条行线到第2条行线 */</span>
.item1 {
    <span class="property">grid-column-start</span>: <span class="value">1</span>;
    <span class="property">grid-column-end</span>: <span class="value">3</span>;
    <span class="property">grid-row-start</span>: <span class="value">1</span>;
    <span class="property">grid-row-end</span>: <span class="value">2</span>;
}

<span class="comment">/* 项目2：简写方式，列从3到5，行从1到3 */</span>
.item2 {
    <span class="property">grid-column</span>: <span class="value">3 / 5</span>;
    <span class="property">grid-row</span>: <span class="value">1 / 3</span>;
}

<span class="comment">/* 项目3：使用span关键字，列从1开始跨越2个轨道，行从2开始跨越2个轨道 */</span>
.item3 {
    <span class="property">grid-column</span>: <span class="value">1 / span 2</span>;
    <span class="property">grid-row</span>: <span class="value">2 / span 2</span>;
}

<span class="comment">/* 项目4和5：放置在网格的特定单元格中 */</span>
.item4 {
    <span class="property">grid-column</span>: <span class="value">3 / 4</span>;
    <span class="property">grid-row</span>: <span class="value">3 / 4</span>;
}

.item5 {
    <span class="property">grid-column</span>: <span class="value">4 / 5</span>;
    <span class="property">grid-row</span>: <span class="value">3 / 4</span>;
}</code></pre>
        </div>
    </div>
</body>

</html>

代码解析

复制代码

/* 网格容器定义 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4列 */
    grid-template-rows: repeat(3, 150px);  /* 3行，每行150px */
    gap: 15px;
}

/* 项目1：从第1条列线到第3条列线，从第1条行线到第2条行线 */
.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

/* 项目2：简写方式，列从3到5，行从1到3 */
.item2 {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
}

/* 项目3：使用span关键字，列从1开始跨越2个轨道，行从2开始跨越2个轨道 */
.item3 {
    grid-column: 1 / span 2;
    grid-row: 2 / span 2;
}

/* 项目4和5：放置在网格的特定单元格中 */
.item4 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

.item5 {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}