Atom erkennt keine CSS-Gitterbefehle "justify-items" und "justify-self". Warum?

Question

Aus irgendeinem komischen Grund erkennt Atom die justify-items und Befehle nicht, die in css Grids verwendet werden. Weiß jemand, warum das ist, und ob es eine Lösung dafür gibt?

.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

Der Code, den Sie in der Frage geschrieben haben, sieht nicht richtig aus.

justify-items gilt für den Gittercontainer. Es richtet die untergeordneten Elemente des Containers aus. Im Wesentlichen wird der Standardwert justify-self für alle Elemente festgelegt.

Sie haben justify-items auf das Rasterelement angewendet (.header).

Daher ist justify-items, außer das Element ist auch ein Gittercontainer, keine Wirkung.

gilt für Rasterelemente. Dadurch können einzelne Elemente den vom Container festgelegten Wert justify-items überschreiben.

According to the grid spec, justify-self: start ist eine gültige Regel, wenn sie auf ein Rasterelement angewendet wird.

Answer 2

Ist das eine Weniger-Datei?

Diese Hervorhebung wird vom Sprach-Plugin für die erkannte Sprache der aktuellen Datei gesteuert. Die aktuellen Versionen der language-css und language-postcss unterstützen diese Eigenschaften, so dass sie die richtigen Hooks für Ihr Syntaxhervorhebungsthema bereitstellen sollten, um sie richtig zu färben. Allerdings habe ich bemerkt, dass das language-less Paket sie nicht unterstützt.

Normalerweise können Sie in der Symbolleiste am unteren Bildschirmrand sehen, in welcher Sprache die aktuelle Datei eingestellt ist. Es wird rechts unten neben der Zeichencodierung der Datei angezeigt.