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;

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

1 个答案: