我目前正在设置我的CSS网格，并尝试使用网格速记在一个漂亮的干净声明中设置所有内容。
例如grid: auto / "sidebar" 15em "content" auto;
这行不通。Chrome 不会解析它。然而。。。这确实有效。
grid: "menu" 45px "context-header" 100px "main" auto / auto;
我最初认为我不能auto放在/之前，但删除grid-area属性以使其grid: auto / 15em auto;解析正常。
现在可以在这里提出一个更大的观点，即我是否真的需要使用区域属性。这只是声明轨道空间的一种很好的可读方法。 所以我想我的问题更多的是关于语法。为什么我可以在/之前拥有网格区域属性，而在之后却没有？
我已经查看了Mozilla文档，目前使用 https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid 作为我的"圣经"。除非我误解了一些明显的东西，否则我无法弄清楚为什么我会遇到这个问题。
提前感谢！
编辑：这是我的完整网格声明，以便进一步了解。SASS 变量名称希望是不言自明的。
包装纸
$grid-wrapper-columns: auto;
$grid-wrapper-rows: 45px 100px auto;
$grid-wrapper-area: "menu"
"context-header"
"main";
主要
$grid-main-columns: 15em auto;
$grid-main-rows: auto;
$grid-main-area: "sidebar" "content";
内容
$grid-content-columns: 80% 20%;
$grid-content-rows: auto;
$grid-content-area: "content-left" "content-right";
您只需要将名称交换到斜杠的左侧，如下所示：
grid: "sidebar" "content" auto / 15em auto;
呈现为：
grid-template-rows: auto auto;
grid-template-columns: 15em auto;
grid-template-areas: "sidebar" "content";
grid-auto-rows: auto;
grid-auto-columns: auto;
grid-auto-flow: row;