Yesterday I was working on my code as usual and everything was going fine. Today, however, after turning on VSC I spotted that my CSS file got flooded with errors, I have no idea what happened.

Here's one example of code that worked before and now it's broken:

.portfolio {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[6];
      grid-template-columns repeat(6, 1fr);
  grid-auto-rows: 300px 400px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  grid-auto-flow: dense;
}

I made a screenshot so you guys can see what I mean since it's my first post here and I hope it all seems clear.

https://i.stack.imgur.com/txK0n.png

Also, there is an even weirder occurrence that I can't handle, any ideas?

.nav {
  display: 0;
  position: fixed;
  z-index: 999;
  width: 66%;
  right: 0;
  top: 0;
  background: none;
  height: 100vh;
  padding: 1em;

  ul.primary-nav {
    margin-top: 5em;
  }
  
  li {
    color: white
  }

}

https://imgur.com/a/ANlezCc - screen in VSC with problems

CodePudding user response：

You must try to check on your VSC on the bottom right if the language is set to auto detect.

CodePudding user response：

Although this is not the answer you are looking for, I have identified just how to make your code runnable. I had to take yours, which is this:

.portfolio {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[6];
      grid-template-columns repeat(6, 1fr);
  grid-auto-rows: 300px 400px;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  grid-auto-flow: dense;
}

And switched to:

.portfolio {
    display: -ms-grid;
    display: grid;
    /* the line below bracket notation does not work… 
    not sure how to fix this, just removed the number. */
    -ms-grid-columns: (1fr) [];
    /* the line below was missing a ':' */
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 300px 400px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-auto-flow: dense;
}

Please do tell me how different are the things that are displayed now on your website.