Search code examples
cssjustifycss-grid

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

For some weird reason, atom is not recognising the justify-items and justify-self commands used in css grids. Does anyone know why that is, and if there is a fix for it?

.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];
}

enter image description here

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

  • The code you've posted in the question doesn't look right.

    justify-items applies to the grid container. It aligns the child elements of the container. Essentially, it establishes the default justify-self value for all items.

    You have justify-items applied to the grid item (.header).

    Therefore, unless the item is also a grid container, justify-items will have no effect.

    justify-self applies to grid items. It enables individual items to override the value of justify-items set by the container.

    According to the grid spec, justify-self: start is a valid rule when applied to a grid item.