2

I am having trouble with the grid layout system in css, while I am following the official guide from Mozilla, even copying and pasting their code still gives me an error.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*columns defined as a fraction of the grid*/
  grid-template-rows: auto; /*rows defined relative to the amount of areas*/
  grid-template-areas: 
  "header header header"
  "main main sidebar" 
  "footer footer footer";
}
.header {
  grid-area: header;

}

despite any attempts to troubleshoot the code so far, the grid-area line gives me unknown property 'grid-area'

neocities doesn't have any unique documentation. Is this simply an editor quirk? And is there an alternative?

Voodin
  • 21
  • 3

1 Answers1

1

If by "editor quirk" you mean "is this a false positive because the editor doesn't have synatx rules for CSS Grid", then yes, it appears to be an editor problem. Neocities uses Ace Editor, which doesn't support CSS Grid yet (see https://github.com/ajaxorg/ace/issues/4025), from what I can tell.

Assuming it lets you save your changes, I would ignore those errors - as long as the browser supports CSS Grid, it will work anyway. The CSS Grid spec is still in active development, though, so you might want to consider fallback rules.

As for alternatives, you might be able to approximate a grid layout with flexbox (which has fairly good support at this point). You may also find this question and answer useful, How (and why) to use display: table-cell (CSS), if styling your content as though it were table content is acceptable.

Tieson T.
  • 20,774
  • 6
  • 77
  • 92
  • Neocities uses Ace Editor? Good to know, I will attempt to use flexbox as well and see if it's a better fit. – Voodin Mar 19 '21 at 22:32
  • 1
    As far as I can tell, yes, from looking at the source code, Neocities uses Ace Editor. I'm not really all that familiar with Neocities (I knew about it, but have never had a reason to use it), so take that with a healthy pinch of salt. If you don't need an in-browser editor, you can probably use something like [Visual Studio Code](https://code.visualstudio.com/), [Brackets](http://brackets.io/), or [Atom](https://atom.io/) (or whatever else floats your boat). – Tieson T. Mar 20 '21 at 01:20