Atom无法识别CSS网格命令＆＃34; justify-items＆＃34;并且＆＃34;自我辩解＆＃34;。为什么？

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在应用于网格项时是一个有效的规则。