HTML元素无法正确跨Grid Template Areas，仅占单个单元格求助

你的核心问题是错误地将CSS的grid-area属性当作HTML原生属性使用，浏览器无法识别这个自定义属性，导致网格元素无法匹配到你定义的模板区域，因此默认只占用单个单元格。

修复步骤： #

需要通过CSS为网格子元素设置grid-area属性，关联到grid-template-areas中定义的区域名称，而不是在HTML标签里写grid-area="xxx"。

修正后的完整代码： #

<html>
  <head>
    <title>Test</title>
    <style>
@media screen {
    .grid-1 {                           /* main grid */
        display: grid;
        grid-template-areas:
        'main main'
        'opt1 opt2'
        'opt3 opt3'
        'subm ...';
        gap: 10px;
    }

    .grid-1 * {
        margin: 0;
        box-sizing: border-box;
        background-color: #ccc;
    }

    /* 关键：为每个元素设置对应的grid-area */
    .main { grid-area: main; }
    .opt1 { grid-area: opt1; }
    .opt2 { grid-area: opt2; }
    .opt3 { grid-area: opt3; }
    .subm { grid-area: subm; }
}

@media screen and (width < 60rem) {
    .grid-1 {
        grid-template-areas:
        'main main'
        'opt1 opt1'
        'opt2 opt2'
        'opt3 opt3'
        'subm ...';
    }
}
    </style>
  </head>
  <body>
    <div class="grid-1">
      <span class="main">Main</span>
      <span class="opt1">Options 1</span>
      <span class="opt2">Options 2</span>
      <span class="opt3">Options 3</span>
      <span class="subm">Submit</span>
    </div>
  </body>
</html>

补充说明： #

• HTML中没有grid-area这个原生属性，你之前写的<span grid-area="main">属于自定义属性，浏览器不会将其与CSS网格系统关联。
• 必须通过CSS的grid-area属性，将子元素和grid-template-areas里的区域名称绑定，才能让元素跨单元格占据指定区域。
• 你定义的grid-template-areas语法是正确的，包括用...表示空单元格的写法没问题。

内容的提问来源于stack exchange，提问作者U. Windl