I've happily used October CMS for about a year now. I've recently been learning to use the grid layout property in css. I'm trying to make a new theme for myself using this. But when I add some of the grid properties, I get errors. Before I continue, let me say that despite the errors below, the page (https://perelon.com.br/gridpage) still renders as if there were no errors.

If I use: grid-template-columns: repeat(5, 1fr);

I get an error: Unknown property 'grid-template-columns'. Expected RBRACE at line 9 column 36. (The code is on line 9 - and if I change 1fr to auto, I don't get the RBRACE error.)

If I use: grid-template-rows: 250px repeat(3, auto);

I get WARNING, not an error: Unknown property 'grid-template-columns'. (Nothing about RBRACE)

If I use: gap: 1px; I get an error: Unknown property 'grid-gap'.

Last updated 4 years ago

You probably have a typo earlier in your CSS file. Care to share your CSS file?

/* GLOBAL STYLES */
* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   list-style-type: none;
   text-decoration: none;
}

body {
  margin: 5px;
  padding: 0;
  background-color: #00ff00;
}

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 250px repeat(3, auto); 
  /*grid-template-columns: 250px 250px;*/
  grid-gap: 0;
}

.header {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  background-color: green;
  color: white;
  margin: 0px;
  padding: 0px;
}

.content1 {
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  background-color: transparent;
  border: 5px solid yellow;
  color: #009;
  margin: 0px;
  padding: 20px 20px 20px 30px;
  border-radius: 50px;
}

.content2 {
  grid-column: 1 / 5;
  grid-row: 3 / 4;
  background-color: rgb(0, 0, 255);
  margin: 0px;
  padding: 0px;
}

.menu {
  grid-column: -2 / -1;
  grid-row: 2 / -2;
  background-color: rgb(255, 0, 0, 0.75);
  border: 5px dotted red;
  margin: 0px;
  padding: 0px;
}

.footer {
  grid-column: 1 / -1;
  grid-row: 4 / -1;
  background-color: purple;
  color: white;
  margin: 0px;
  padding: 0px;
}

Last updated 4 years ago

looks fine to me. where exactly do you get this error?

I get warnings (yellow triangle with black exclamation point) in lines with: grid-gap grid-template-columns grid-template-rows

If I use fr in the either of the template properties (ex: grid-template-columns: 2fr 1fr;), I get an error (red box with white X) instead of a warning.

looks like you need to upgrade your browser...

I looked at the CSS using my browser debug tools and it's all good, no warnings.

I really wanted to send a small word to say thanks to you for the fantastic points you are writing on this site.

Last updated 4 years ago

I use several browsers, but the two I use most, I use versions that are completely compatible with css grid: Firefox 71 and Chrome 79. And both of these browsers render the frontend fine.

I'm not sure if I was clear. I see the warnings and errors in October CMS. When I'm editing /assets/css/grid.css within the CMS area of October, I get these error and warning messages in October, and only there.

Again, the frontend renders fine.

Ok. What version of October are you using?

The system status in the dashboard says the system is up to date. It indicates build 458.

Ok, I can reproduce the behavior you are seeing. Can you open an issue on github about this, with screenshots of the warnings (when hovering over the warnings)?

I guess we'll need to add those to the CSS parser.

The Github project link is https://github.com/octobercms/october/issues