html - CSS 网格简写 - 网格区域属性不起作用

Question

我目前正在设置我的 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";

Answer 1

您只需要将名称交换到斜杠的左侧，如下所示:

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;