How to add missing css properties

[shadab97]

How to Add Missing CSS Properties in GrapesJS

Problem

By default, GrapesJS doesn't include all CSS properties in the Style Manager. Common missing properties include:

• gap for flexbox
• aspect-ratio
• Custom CSS Grid properties
• Specific transform properties

can any one show me example for this
just add some missing properties in already showing selector
like in flex gap is missing just add gap rest everything is same(already there)

[mosh-tudor]

@shadab97
You can add whatever you need using this doc:

https://grapesjs.com/docs/modules/Style-manager.html#configuration

---

Example:

gap for flexbox

      {
        label: 'Gap',
        info: 'The space between child elements, often called a gutter.',
        type: 'composite',
        detached: true,
        requires: { display: ['flex', 'inline-flex', 'grid'] },
        properties: [
          {
            property: 'column-gap',
            label: 'Columns',
            type: 'integer',
            units: ['px', '%', 'em', 'rem', 'vh', 'vw'],
            default: 'normal',
            fixedValues: ['normal', 'inherit'],
            min: 0,
          },
          {
            property: 'row-gap',
            label: 'Rows',
            type: 'integer',
            units: ['px', '%', 'em', 'rem', 'vh', 'vw'],
            default: 'normal',
            fixedValues: ['normal', 'inherit'],
            min: 0,
          },
        ],
      },