使用 JIT 和任意网格模板区域样式的顺风 CSS 网格

Question

根据文档，顺风JIT(Just In Time)模式允许添加任意样式。

我无法使其适用于 CSS 网格的grid-template-areas属性。在这个简单的例子中，我只想要左边的边，右边的主要内容。

请注意，我有更复杂的目标，我知道我不需要CSS网格来做这么简单的布局。

• JIT 模式的工作方式与使用任意填充(如px-[23px]工作)一样。
• 问题就在这里：[grid-template-areas:'sider content']，就像您转到CSS选项卡一样，如果未注释，则具有相同的属性。

这里有一个游乐场：

<div class="grid [grid-template-areas:'sider content']">
<sider class="[grid-area:sider]">SIDER</sider>
<main class="[grid-area:content]">MAIN</main>
</div>

Answer 1

因为[grid-template-areas:'sider content']中有两个不同的类。[grid-template-areas:'sider和content']因为空间。必须使用下划线来处理空格。

[grid-template-areas:'sider_content']

输出：

.[grid-template-areas:'sider_content'] {
grid-template-areas: 'sider content';
}

参考