classname #

Type: String

Default: grid

This option sets the class by which the grid will be defined in the content.

By default, the grid in the editor has the following HTML:

<div class="grid">
    <div class="column column-6"></div>
    <div class="column column-6"></div>
</div>

You can change the grid class like this:

ArticleEditor('#entry', {
    grid: {
        classname: 'row'
    }
});

If you change the class of the grid, do not forget to write it in styles. To do this, create a CSS file and connect it after CSS of the editor. Specify grid styles in it, for example, like this:

.arx-content .row {
    display: flex;
    ... grid css ...
}

In this example, arx-content is the parent content class of the editor. See the editor.classname setting.

overlay #

Type: Boolean

Default: true

This setting turns on and off the display of guides for the grid in the content. To disable, set false:

ArticleEditor('#entry', {
    grid: {
        overlay: false
    }
});

columns.size #

Type: Number

Default: 12

This option sets the number of columns in the grid.

ArticleEditor('#entry', {
    grid: {
        columns: {
            size: 6
        }
    }
});

columns.gutter #

Type: String

Default: 24px

This option sets the gutter value between the columns in the grid.

ArticleEditor('#entry', {
    grid: {
        columns: {
            gutter: '0px'
        }
    }
});

columns.classname #

Type: String

Default: column

This option sets the column grid class.

ArticleEditor('#entry', {
    grid: {
        columns: {
            classname: 'col'
        }
    }
});

columns.prefix #

Type: String

Default: column-

This option sets the prefix for the grid column classes.

ArticleEditor('#entry', {
    grid: {
        classname: 'row',
        columns: {
            classname: 'col',
            prefix: 'col-'
        }
    }
});

As a result, columns will get a new class and you can use the Bootstrap grid for example:

<div class="row">
    <div class="col col-6"></div>
    <div class="col col-6"></div>
</div>

patterns #

Type: Array

Default: array

This option sets which grid templates will be available in the Add Grid menu. The default is:

[
    '6|6', '4|4|4', '3|3|3|3', '2|2|2|2|2|2',
    '3|6|3', '2|8|2', '5|7', '7|5',
    '4|8', '8|4', '3|9', '9|3',
    '2|10', '10|2', '12'
]

You can change the patterns depending on the number of columns in your grid:

ArticleEditor('#entry', {
    grid: {
        patterns: ['2|2', '1|3', '1|1|1|1'],
        columns: {
            size: 4
        }
    }
});

disable #

You can completely disable the grid feature, to do this, set the setting to false.

ArticleEditor('#entry', {
    grid: false
});