Describe the Issue

The GravityView Custom CSS/Custom Content editor is showing false warnings/errors for valid CSS properties such as gap, flex-grow, and repeat() in grid-template-columns. These are part of standard modern CSS but are being flagged as "Unknown property" or invalid in the editor.

This creates confusion for users who are writing valid CSS using Grid and Flexbox.

Example

The following code throws a warning for gap and repeat(...), even though it's fully supported by all modern browsers:

.gv-list-multiple-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

Warning shown: Unknown property 'gap'

Screenshot:

Expected Behavior

Valid CSS using modern Grid and Flexbox properties should not trigger any warnings in the GravityView Custom CSS panel.

According to ChatGPT:

⚠️ Why the warning appears

The GravityView Custom CSS panel uses a code linter or static analyzer — and it may not be fully up-to-date with:

• CSS Grid or Flexbox properties
• Logical properties like gap, flex-grow, etc.
• Newer syntax like repeat() inside grid-template-columns

These tools sometimes throw warnings on perfectly valid code, especially in embedded editors that don’t update as quickly as modern browsers do.

Suggested Fix

Update or reconfigure the CSS linter/parser used in the Custom CSS panel to correctly support modern CSS features (Grid, Flexbox, etc.), or suppress warnings for known-valid modern properties.

Environment

• GravityView version: Latest/all