24分栏

组件库里的 24 分栏系统本质上并不是依赖 CSS Grid，而是基于 flex 布局 + 固定的 24 份栅格宽度计算 实现的。

原理

Row

.row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

display: flex 让子元素在一行排列

flex-wrap: wrap 当超过 24 份时换行（类似 Grid 的自动换行）

Col

.col {
  box-sizing: border-box;
}

.col-1 { flex: 0 0 calc(1 / 24 * 100%); max-width: calc(1 / 24 * 100%); }
.col-2 { flex: 0 0 calc(2 / 24 * 100%); max-width: calc(2 / 24 * 100%); }
.col-3 { flex: 0 0 calc(3 / 24 * 100%); max-width: calc(3 / 24 * 100%); }
...
.col-24 { flex: 0 0 100%; max-width: 100%; }

为什么要乘以100% ?

如果你只写：1/24，浏览器不知道这个结果的单位（px？em？无单位？），CSS 会把它当作 无效的长度。只有写成：

(1 / 24) * 100%

浏览器才知道：这是父宽度（100%）的 1/24。

gutter

大部分组件库用 padding + margin 技术（Ant Design/TDesign 使用负 margin 技术）：

.row {
  margin-left: -8px;  /* gutter / 2 */
  margin-right: -8px;
}

.col {
  padding-left: 8px;
  padding-right: 8px;
}

offset

offset的本质是给列加一个 “左侧占几份宽度” 的空白空间。

例如：

<Col :span="6" :offset="6" />

含义是：

• 先空出父容器宽度的 6/24
• 再添加 6/24 的margin-left

所以最终视觉上会往右移动

.col-offset-6 {
  margin-left: calc(6 / 24 * 100%);
}