我刚刚开始使用CSS Grid，并且不清楚grid-template-area的局限性，并且我找不到关于此的任何适当的文档/指南。
我了解您无法使用CSS Grid进行“俄罗斯方块”测试，但让我们再看一下这个简单的示例：
grid-template-areas:
"h h h h h h"
"s m m m m m"
"s m m m m m"
"s m m m m m"
"s f f f f f";
template-columns和rows一直都是1fr，所以那里没什么有趣的，每个元素只有背景颜色。上面的作品很好。但是，这不是：
"h h h h h h"
"s m m m m m"
"s m m m m m"
"s m m m m m"
"s f f f . f";
“无效”是指页面上没有任何内容。
这不是真的俄罗斯方块；我只想在页脚中留一个空白。我了解我无法执行此操作，但是有人可以解释其背后的明确规则吗？
修改 @Michael_B建议不要使用tetris 和连接的矩形，但是此矩阵也不起作用：
"h h h h h h"
"s m m m m m"
"s m . . m m"
"s m m m m m"
"s f f f f f";
编辑2 就像另一个答案所说的那样，命名的网格单元必须形成一个单个填充矩形。这就是窍门。
预先感谢