Atom 无法识别 CSS 网格命令 "justify-items" 和 "justify-self"。为什么？

Question

由于某些奇怪的原因，atom 无法识别 css 网格中使用的 justify-items 和 justify-self 命令。有谁知道这是为什么，是否有解决办法？

.container {
  display: grid;
  grid-template-columns: [page-start] 1fr [content-start] 80vw [content-end] 1fr [page-end];
  grid-template-rows:
    [header] 5vh [home] 50vh [about] 5em [empty-start-one] 50vh
    [empty-end-one] 5em [services] 50vh [portfolio] 50vh [contact] 5em
    [empty-start-two] 30vh [footer] 10vh [footer-end];
}

<div class="container">
  <div class="box header">
</div>

Answer 1

这是 Less 文件吗？

此突出显示由当前文件识别语言的语言插件控制。 language-css 和 language-postcss 的当前版本支持这些属性，因此它们应该为您的语法突出显示主题提供正确的钩子以正确地为它们着色。但是，我注意到 language-less 包不支持它们。

您通常可以在屏幕底部的工具栏中看到当前文件设置为哪种语言。它显示在右下角，在文件的字符编码旁边。

Answer 2

您在问题中发布的代码看起来不正确。

justify-items 适用于网格容器。它对齐容器的子元素。本质上，它为所有项目建立默认 justify-self 值。

您已将 justify-items 应用于网格项 (.header)。

因此，除非该项目也是网格容器，否则 justify-items 将无效。

justify-self 适用于网格项目。它使单个项目能够覆盖容器设置的 justify-items 的值。

According to the grid spec、justify-self: start 是应用于网格项的有效规则。

Atom 无法识别 CSS 网格命令 "justify-items" 和 "justify-self"。为什么？

Atom not recognising CSS grid commands "justify-items" and "justify-self". Why?

css

justify

css-grid