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关键字指定项目跨越的轨道数量，而不是指定结束线网格线示意图：页面底部展示了网格线编号系统，帮助你理解网格布局的定位原理
<!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;
}