css某个模块需要横跨多列怎么办_使用grid-column控制跨列范围

来源：Nodejs社区作者：会飞的猪头衔：草根站长

导读：本期聚焦于小伙伴创作的《css某个模块需要横跨多列怎么办_使用grid-column控制跨列范围》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《css某个模块需要横跨多列怎么办_使用grid-column控制跨列范围》有用，将其分享出去将是对创作者最好的鼓励。

在CSS Grid布局中，如果希望某个模块横跨多列，最直接的方式就是使用grid-column属性控制该网格项所占据的列范围。Grid容器划分出列轨道后，每个子项默认只占一列，而通过grid-column可以打破这个限制。

grid-column基础概念

grid-column是grid-column-start和grid-column-end的简写属性。它用来指定网格项在列方向上的起止线。Grid布局中的列线从1开始编号，最左边为第1条线，往后依次递增。

grid-column-start：起始列线
grid-column-end：结束列线（不包含该线本身）

如何使用grid-column跨列

假设我们有一个三列的网格，希望某个模块横跨全部三列，就可以让它从第一条列线开始，到第四条列线结束。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.full-width {
  /* 从列线1开始，到列线4结束，即横跨3列 */
  grid-column: 1 / 4;
}

使用span关键词

除了写具体线编号，也可以用span表示跨越的列数。例如下面的写法让模块横跨两列：

.span-two {
  /* 从当前位置开始横跨2列 */
  grid-column: span 2;
}

完整HTML示例

下面给出一个简单的页面结构以及对应样式，展示普通项与跨列项混排的效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>
    .wrap {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .box {
      background: #e0e0e0;
      padding: 20px;
      text-align: center;
    }
    .wide {
      /* 横跨全部三列 */
      grid-column: 1 / 4;
      background: #b3d4fc;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="wide">我横跨三列</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</body>
</html>

常见取值对照

写法	含义
grid-column: 1 / 3;	从第1列线到第3列线，横跨2列
grid-column: 2 / span 2;	从第2列线开始，横跨2列
grid-column: 1 / -1;	从首列线到尾列线，横跨所有列

注意事项

当使用负数线编号时，-1代表倒数第一条列线，这在不知道总列数时非常方便。如果跨列范围超出了容器实际列数，浏览器会隐式创建网格轨道来容纳内容，但通常我们应保证列线在已定义范围内。

grid-column: 1 / -1; 是实现模块通栏最简洁的写法。

通过grid-column控制跨列范围，可以避免使用多余的包裹元素或者复杂的浮动清除，让布局代码更清晰也好维护。

CSS_Grid grid-column 跨列布局修改时间：2026-07-27 01:30:16

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。