CSS grid-template-area是否支持元素跨多行多列布局？

算力阿峰

2026-8-27

回答

结论：grid-template-areas 原生支持元素跨多行、多列排布，你用到的重复书写区域标识的写法完全符合CSS规范，修正笔误后即可正常实现预期布局效果。

语法规则说明

使用grid-template-areas定义网格时，跨行列布局的标准实现方式就是在连续的网格单元格位置重复填写同一个自定义区域名，只需要满足两个生效前提：

同一区域名覆盖的所有单元格必须组成连续的矩形，不允许出现L形、断开、交错的非矩形结构，否则整个grid-template-areas属性会直接失效
每一行字符串内的区域标识数量必须完全一致，保证网格总列数对齐

示例代码问题修正

你提供的参考代码存在一处拼写错误会导致布局不生效：属性名正确写法为复数形式grid-template-areas，你写的单数grid-template-area是无效CSS属性。
修正后的完整可用代码如下：

.container-3{
    display: grid;
    grid-template-areas: 
    "m m m m h h h h h h h h "
    "m c c c c c c c c c c c"
    "m f f f f f f f f f f f";
    gap:10px;
    padding-bottom: 500px;
}

.header1{
    grid-area: h ;
}

.menu1{
    grid-area: m;
    background-color: orange;
}

.content1{
    grid-area: c;
}

.footer1{
    grid-area: f;
}

上述代码运行后各元素的跨区效果和预期完全一致：