Grid布局之grid-column/grid-row

grid-column 和 grid-row 用于指定子元素的起始和结束网格线，实现跨行跨列布局。

基本概念

Grid 布局通过网格线（grid line）划分区域，网格线从 1 开始编号。

网格线:  1    2    3    4
       |----|----|----|
       |  1 |  2 |  3 |
       |----|----|----|

grid-column

控制元素跨越的列。

语法

.item {
  grid-column: start / end;
}

/* 占据第 1 到第 3 列（跨 2 列） */
.item {
  grid-column: 1 / 3;
}

/* 简写：span n 表示跨越 n 列 */
.item {
  grid-column: span 2;
}

/* 从第 2 列开始，跨 2 列 */
.item {
  grid-column: 2 / span 2;
}

grid-row

控制元素跨越的行。

/* 占据第 1 到第 4 行（跨 3 行） */
.item {
  grid-row: 1 / 4;
}

/* 使用 span */
.item {
  grid-row: span 2;
}

常见布局示例

页面头部跨全宽

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.header {
  grid-column: 1 / -1;  /* -1 表示最后一根网格线 */
}

复杂仪表盘布局

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}

.widget-wide {
  grid-column: span 3;
}

.widget-tall {
  grid-row: span 2;
}

<div class="dashboard">
  <div class="widget-large">大组件</div>
  <div class="widget-tall">高组件</div>
  <div class="widget">普通</div>
  <div class="widget-wide">宽组件</div>
</div>

表单标签与输入框

.form {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 16px;
}

.label {
  grid-row: span 1;  /* 默认 */
}

.input-full {
  grid-column: 2 / 4;  /* 输入框占两列 */
}

特殊值

/* 跨全宽 */
.full-width {
  grid-column: 1 / -1;
}

/* 跨全高 */
.full-height {
  grid-row: 1 / -1;
}

实际案例

新闻布局

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 15px;
}

.news-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.news-wide {
  grid-column: span 2;
}

日历布局

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.event-days {
  grid-column: 3 / 6;  /* 周三到周五的活动 */
}

要点总结

• 网格线从 1 开始，-1 表示最后一根线
• grid-column: 1 / 3 表示从第 1 线到第 3 线（跨 2 列）
• span n 表示跨越 n 列/行
• grid-column: 1 / -1 实现跨全宽