你想了解 Grid 布局中 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 这四个核心属性，它们是用来精准控制单个网格项在网格容器中「占据行列位置和跨度」的关键属性，我会用通俗的语言+完整示例帮你掌握。

核心概念

Grid 布局会把容器划分成「行轨道」和「列轨道」，轨道之间的分隔线被称为「网格线」（Grid Line）：

  • 列网格线：垂直方向，从左到右编号（默认从 1 开始）。
  • 行网格线：水平方向，从上到下编号（默认从 1 开始）。

这四个属性的作用就是通过指定网格线的编号，定义单个网格项占据的行列范围：

属性作用
grid-column-start网格项起始列网格线（左边框所在位置）
grid-column-end网格项结束列网格线（右边框所在位置）
grid-row-start网格项起始行网格线（上边框所在位置）
grid-row-end网格项结束行网格线（下边框所在位置）

完整示例代码

这个示例会创建一个 3×3 的网格容器，通过这四个属性控制不同网格项的占据范围，效果直观：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid 行列起止属性示例</title>
  <style>
    /* 网格容器：3列3行，列/行宽高均为100px */
    .grid-container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      gap: 5px; /* 网格项间距 */
      width: 310px;
      margin: 20px auto;
      border: 2px solid #333;
      padding: 5px;
    }

    /* 通用网格项样式 */
    .grid-item {
      background-color: #42b983;
      color: white;
      font-size: 20px;
      text-align: center;
      line-height: 100px;
    }

    /* 网格项1：占据第1列（列1到列2）、第1行（行1到行2）【默认单个单元格】 */
    .item1 {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 1;
      grid-row-end: 2;
    }

    /* 网格项2：占据第2-3列（列2到列4）、第1行（行1到行2）【跨2列】 */
    .item2 {
      grid-column-start: 2;
      grid-column-end: 4; /* 列4是第3列的结束线 */
      grid-row-start: 1;
      grid-row-end: 2;
      background-color: #2c3e50;
    }

    /* 网格项3：占据第1列、第2-3行（行2到行4）【跨2行】 */
    .item3 {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 2;
      grid-row-end: 4; /* 行4是第3行的结束线 */
      background-color: #e74c3c;
      line-height: 205px; /* 适配跨2行的行高 */
    }

    /* 网格项4：占据第2-3列、第2-3行（跨2列2行）【占据4个单元格】 */
    .item4 {
      grid-column-start: 2;
      grid-column-end: 4;
      grid-row-start: 2;
      grid-row-end: 4;
      background-color: #f39c12;
      line-height: 205px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item item2">2（跨2列）</div>
    <div class="grid-item item3">3（跨2行）</div>
    <div class="grid-item item4">4（跨2列2行）</div>
  </div>
</body>
</html>

代码关键解释

  1. 网格线编号逻辑：
    3列网格的列网格线编号是 1、2、3、4（3列需要4条分隔线）；
    3行网格的行网格线编号是 1、2、3、4（3行需要4条分隔线）。
    比如 grid-column-end: 4 表示网格项的右边界在第4条列网格线（即第3列的右侧）。

  2. 跨行列的核心逻辑：

    • 跨列数 = grid-column-end - grid-column-start（比如 item2：4-2=2，跨2列）；
    • 跨行数 = grid-row-end - grid-row-start（比如 item3：4-2=2，跨2行）。

  3. 简化写法（实用技巧）：
    日常开发中，这四个属性通常用简写 grid-column 和 grid-row 替代：

    /* 等价于 item2 的写法：grid-column: 起始线 / 结束线 */
.item2 {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

/* 更简洁：用 span 表示跨度（跨2列） */
.item2 {
  grid-column: 2 / span 2; /* 从第2列开始，跨2列 */
  grid-row: 1 / 1; /* 仅第1行 */
}

扩展用法（提升实用性）

  • 负数网格线：可以用负数表示从右/下开始计数的网格线，比如 grid-column-end: -1 表示最后一列的结束线：
    /* 从第1列开始，到最后一列结束（跨所有列） */
.item-full-width {
  grid-column-start: 1;
  grid-column-end: -1;
}
  • auto 值：默认值，代表占据单个单元格（起始线+1=结束线）。

总结

  1. grid-column-start/end 控制网格项列方向的起止位置，grid-row-start/end 控制行方向的起止位置。
  2. 核心是通过「网格线编号」定义范围，跨行列数 = 结束线编号 - 起始线编号。
  3. 日常开发中优先用简写 grid-column: 起始/结束、grid-row: 起始/结束，或 span 表示跨度，更简洁高效。
# 前端 # css
Logo
亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

avatar 亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

avatar 亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

avatar 亚马逊云科技技术品牌专区