Grid option in the editor.

[jaspreet-singh-1999]

hi,
I want grid in the editor and also want to add its trait how can i do ??

[mosh-tudor]

@jaspreet-singh-1999

As for traits, you can do everything using the default functionality.

I managed to achieve this result:

---

I think the key to success here is the "requires" and "requiresParent" properties, which can be used to hide unnecessary fields.,

editor.StyleManager.addSector('layout', {
    name: 'Layout',
    open: true,
    properties: [
      {
        label: 'Display',
        property: 'display',
        default: 'block',
        type: 'radio',
        list: [
          { value: 'block' },
          { value: 'flex' },
          { value: 'grid' },
          { value: 'inline-block' },
          { value: 'inline' },
          { value: 'none' },
        ],
      },
      {
        label: 'Direction',
        property: 'flex-direction',
        requires: { display: ['flex', 'inline-flex'] }, // <--------
        type: 'select',
        default: 'row',
        full: true,
        list: [...],
      },
      {
        label: 'Align',
        property: 'align-items',
        requires: {
          display: ['flex', 'inline-flex'], 'flex-direction': ['', 'row', 'row-reverse'], // <--------
        },
        default: 'stretch',
        type: 'radio',
        list: [...],
      },
  ...
...

[jaspreet-singh-1999]

Not show properly,

[mosh-tudor]

It's better to start by reading the documentation, it will save you a lot of time:

https://grapesjs.com/docs/getting-started.html

+ To get help you need to post the code on JSFiddle. Via screenshot, I don't think anyone will find what you did wrong ✌️.

[artf]

well said @mosh-tudor 🥇