自定义响应式网格列溢出父行问题排查

核心问题：CSS语法错误（未闭合大括号） #

你的CSS代码中，.grid__row.grid__margin-x规则的大括号未闭合，导致后续的单元格宽度、margin规则被错误嵌套在该规则内部，浏览器无法正确解析这些样式——单元格的宽度设置完全失效，默认宽度加上左右margin后总宽度超出父容器，最终触发换行。

错误代码片段：

.grid__row.grid__margin-x {
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;

/*-- 4 COLUMNS - GUTTER SO THEY ALL FIT--*/
.grid__row.grid__margin-x > .grid__cell.grid__cell__medium--4{
   width: calc(25% - 1.875rem);
}

这里.grid__row.grid__margin-x的{没有对应闭合的}就直接编写下一个选择器，浏览器会忽略这些无效的嵌套规则。

次要问题：HTML标签未闭合 #

所有<h1>标签都未正确闭合（写成<h1>...</h1>而非<h1>...</h1>），会导致DOM结构错乱，间接影响布局渲染。

修复步骤 #

1. 修正CSS语法错误，给.grid__row.grid__margin-x补上闭合大括号：

/*-- WHEN THERE IS MARGIN REMOVE IT FROM EDGES OF OUTER ROW TO AFFORD SPACE --*/
.grid__row.grid__margin-x {
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
} /* 补上该闭合大括号 */

/*-- 4 COLUMNS - GUTTER SO THEY ALL FIT--*/
.grid__row.grid__margin-x > .grid__cell.grid__cell__medium--4{
   width: calc(25% - 1.875rem);
}

/*--- GUTTER ADDED TO COLUMN----*/
.grid__row.grid__margin-x > .grid__cell {
   margin-left: 0.9375rem;
   margin-right: 0.9375rem;
}

2. 修正HTML标签，将所有未闭合的<h1>改为正确形式：

<div class="grid__container">
      <div class="grid__row grid__margin-x">
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1</h1>
        </div>
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1</h1>
        </div>
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1</h1>
        </div>
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1</h1>
        </div>
      </div>
    </div>

3. 可选优化：添加全局盒模型设置，避免内边距、边框影响宽度计算：

*, *::before, *::after {
  box-sizing: border-box;
}

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