自定义CSS Grid中offset类导致列宽度异常的问题

我正在尝试自定义一套带有offset类的CSS Grid布局。问题在于，当给列添加offset类后，列的宽度会变得异常狭窄；而不添加该类时，列宽显示完全正常。

初始代码如下：

/* grid system */

.container {
  background: #999;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1680px;
  width: 100%;
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 0 -15px;
}

.col {
  outline: 2px white dashed;
  padding: 15px;
}


/* cols */

.col-8 {
  grid-column: span 8;
}


/* col offsets */

.col-offset-1 {
  grid-column-start: 2;
}

<div class="container">
  <main class="row">
    <div class="col-8 col-offset-1">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum quibusdam perspiciatis, magnam autem velit totam quae consectetur tempora qui ipsum odit sed voluptatem quaerat error quos iusto aliquid nesciunt tenetur.
      </p>
    </div>
  </main>
</div>

我还发现，若在CSS中为列指定起始位置，当前场景下能正常显示，但这种方式无法应用到所有列类，否则会破坏整体布局：

/* grid system */

.container {
  background: #999;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1680px;
  width: 100%;
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 0 -15px;
}

.col {
  outline: 2px white dashed;
  padding: 15px;
}


/* cols */

.col-8 {
  grid-column: 1 / span 8;
}


/* col offsets */

.col-offset-1 {
  grid-column-start: 2;
}

<div class="container">
  <main class="row">
    <div class="col-8 col-offset-1">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum quibusdam perspiciatis, magnam autem velit totam quae consectetur tempora qui ipsum odit sed voluptatem quaerat error quos iusto aliquid nesciunt tenetur.
      </p>
    </div>
  </main>
</div>

问题原因 #

grid-column: span 8本质是grid-column-start: auto; grid-column-end: span 8，当你叠加grid-column-start: 2时，CSS会优先使用单独设置的起始位置，但grid-column-end会被重置为auto——也就是只占1列宽度，这就是列变窄的原因。

而手动指定grid-column: 1 / span 8后再改起始位置，相当于把起始点从1改成2，结束点保持为2+8=10，所以能正常显示，但这种硬编码起始位置的写法无法适配不同列宽的offset需求。

解决方案 #

最优方案：用CSS变量实现灵活控制 #

通过CSS变量分别管理列的起始位置和跨度，类名组合时自动生效，代码简洁且易扩展：

/* grid system */
.container {
  background: #999;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1680px;
  width: 100%;
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 0 -15px;
}

.col {
  outline: 2px white dashed;
  padding: 15px;
  /* 默认起始位置为1，跨度为12 */
  --col-start: 1;
  --col-span: 12;
  grid-column: var(--col-start) / span var(--col-span);
}

/* 列宽类：仅设置跨度变量 */
.col-1 { --col-span: 1; }
.col-2 { --col-span: 2; }
.col-3 { --col-span: 3; }
.col-4 { --col-span: 4; }
.col-5 { --col-span: 5; }
.col-6 { --col-span: 6; }
.col-7 { --col-span: 7; }
.col-8 { --col-span: 8; }
.col-9 { --col-span: 9; }
.col-10 { --col-span: 10; }
.col-11 { --col-span: 11; }
.col-12 { --col-span: 12; }

/* Offset类：仅设置起始位置变量 */
.col-offset-1 { --col-start: 2; }
.col-offset-2 { --col-start: 3; }
.col-offset-3 { --col-start: 4; }
.col-offset-4 { --col-start: 5; }
.col-offset-5 { --col-start: 6; }
.col-offset-6 { --col-start: 7; }
.col-offset-7 { --col-start: 8; }
.col-offset-8 { --col-start: 9; }
.col-offset-9 { --col-start: 10; }
.col-offset-10 { --col-start: 11; }
.col-offset-11 { --col-start: 12; }

HTML中直接组合类名即可：

<div class="container">
  <main class="row">
    <div class="col-8 col-offset-1">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum quibusdam perspiciatis, magnam autem velit totam quae consectetur tempora qui ipsum odit sed voluptatem quaerat error quos iusto aliquid nesciunt tenetur.
      </p>
    </div>
  </main>
</div>

备选方案：类名组合定义规则 #

如果不想用CSS变量，可以直接为列宽和offset的组合类写死规则：

/* 基础列宽类 */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
/* ...省略其他列宽类 */
.col-8 { grid-column: span 8; }

/* Offset组合类 */
.col-offset-1.col-1 { grid-column: 2 / span 1; }
.col-offset-1.col-2 { grid-column: 2 / span 2; }
/* ...省略其他组合 */
.col-offset-1.col-8 { grid-column: 2 / span 8; }

这种方式代码量较大胜在兼容性好，适合不需要频繁扩展的场景。

内容的提问来源于stack exchange，提问作者user303096