Atom ne reconnaissant pas les commandes de grille CSS "justify-items" et "justify-self". Pourquoi?

Question

Pour une raison étrange, l'atome ne reconnaît pas les commandes justify-items et justify-self utilisées dans les grilles css. Est-ce que quelqu'un sait pourquoi, et s'il y a une solution?

.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

Le code que vous avez posté dans la question ne semble pas correct.

justify-items s'applique au conteneur de la grille. Il aligne les éléments enfants du conteneur. Essentiellement, il établit la valeur justify-self par défaut pour tous les éléments. Vous avez justify-items appliqué à l'élément de grille (.header).

Par conséquent, sauf si l'élément est également un conteneur de grille, justify-items n'aura aucun effet.

justify-self s'applique aux éléments de la grille. Il permet à des éléments individuels de remplacer la valeur justify-items définie par le conteneur.

According to the grid spec, justify-self: start est une règle valide lorsqu'elle est appliquée à un élément de grille.

Answer 2

Est-ce un fichier moins?

Cette surbrillance est contrôlée par le plugin de langue pour la langue reconnue du fichier en cours. Les versions actuelles des language-css et language-postcss prennent en charge ces propriétés, elles doivent donc fournir les bons crochets pour que votre thème de mise en évidence de la syntaxe les colorie correctement. Cependant, j'ai remarqué que le paquet language-less ne les supporte pas.

Vous pouvez normalement voir dans quelle langue le fichier actuel est défini dans la barre d'outils en bas de l'écran. Il est affiché en bas à droite, à côté du codage de caractères du fichier.