arpeasal52350
arpeasal52350

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

mjauvin
mjauvin

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

arpeasal52350
arpeasal52350
/* 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

mjauvin
mjauvin

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

arpeasal52350
arpeasal52350

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.

mjauvin
mjauvin

looks like you need to upgrade your browser...

mjauvin
mjauvin

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

aladanh.go52378
aladanh.go52378

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

arpeasal52350
arpeasal52350

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.

mjauvin
mjauvin

Ok. What version of October are you using?

arpeasal52350
arpeasal52350

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

mjauvin
mjauvin

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

1-12 of 12