@themarioga/grid-editor 4.1.0 → 5.1.0

package/dist/jquery.grideditor.js

@@ -18,6 +18,7 @@
  */
 var METHODS = {
     getHtml:          { value: true, noInstance: function(element) { return element.html(); } },
+    getPlainHtml:     { value: true, noInstance: function(element) { return plainHtml(element.html()); } },
     init:             {},
     deinit:           {},
     reset:            {},
@@ -28,6 +29,7 @@ var METHODS = {
     createRow:        { value: true },
     createColumn:     { value: true },
     createElement:    { value: true },
+    createSection:    { value: true },
     createContainer:  { value: true },
     addTab:           { value: true },
     addAccordionItem: { value: true },
@@ -62,8 +64,8 @@ var BREAKPOINTS = [
 
 /**
  * The view that edits every tier at once. It is the default, and the one most
- * pages want: a layout that needs no per-device tuning is written once and
- * lands on all six prefixes.
+ * pages want: a layout that needs no per-device tuning is written once, as the
+ * class with no breakpoint, and applies at every size.
  */
 var ALL_VIEW = 'all';
 var ALL_VIEW_LABEL_KEY = 'view.all';
@@ -77,6 +79,31 @@ var LEGACY_VIEW_INDEXES = ['lg', 'sm', 'xs'];
 var MAX_COL_SIZE = 12;
 var MAX_COL_OFFSET = 11;
 
+/**
+ * The two sizes that are not a number of units: `equal` is Bootstrap's col,
+ * which shares what the row has left with the other equal columns, and
+ * `auto` is col-auto, as wide as its content.
+ */
+var FLEX_SIZES = ['equal', 'auto'];
+
+/** How many columns a row-cols class puts on a line. */
+var ROW_COLS_VALUES = ['1', '2', '3', '4', '5', '6', 'auto'];
+
+function rowColsClass(tier, value) {
+    return 'row-cols' + (tier.infix ? '-' + tier.infix : '') + '-' + value;
+}
+
+function isUnits(size) {
+    return typeof size === 'number';
+}
+
+/** The class that gives a column `size` at one tier: col-md-4, col-md, col-md-auto. */
+function sizeClass(tier, size) {
+    if (size === 'equal') { return tier.infix ? 'col-' + tier.infix : 'col'; }
+
+    return tier.colPrefix + size;
+}
+
 function breakpoint(key) {
     for (var i = 0; i < BREAKPOINTS.length; i++) {
         if (BREAKPOINTS[i].key === key) { return BREAKPOINTS[i]; }
@@ -84,9 +111,12 @@ function breakpoint(key) {
     return null;
 }
 
-/** The tiers a view writes to: one, or all six in the all view. */
+/**
+ * The tier a view writes to. The all view writes the base class, the one
+ * with no breakpoint, and takes the others off.
+ */
 function tiersFor(view) {
-    if (view === ALL_VIEW) { return BREAKPOINTS.slice(); }
+    if (view === ALL_VIEW) { return [BREAKPOINTS[0]]; }
 
     var tier = breakpoint(view);
     return tier ? [tier] : [];
@@ -218,6 +248,56 @@ function dispatch(set, name, args) {
     return set;
 }
 
+/**
+ * Html with grid-editor's own marking taken off: the ge-* classes, the
+ * column class and the data-ge-* attributes. A div that was only there for
+ * the editor - a content area, a bare element or container wrapper - is left
+ * with nothing on it, and goes, its children taking its place.
+ *
+ * The marking is what lets the editor read its markup back, so this is for
+ * publishing, not for saving something to edit again.
+ */
+function plainHtml(html) {
+    // Parsed in a document of its own, which is inert: no script in the
+    // markup runs and no image starts loading while it is being cleaned
+    var root = $(document.implementation.createHTMLDocument('').body);
+    root[0].innerHTML = html;
+    var emptied = [];
+
+    root.find('*').each(function() {
+        var node = $(this);
+        var marked = false;
+
+        $.each($.makeArray(this.attributes), function(i, attribute) {
+            if (attribute.name.indexOf('data-ge-') === 0) {
+                node.removeAttr(attribute.name);
+                marked = true;
+            }
+        });
+
+        var classes = (node.attr('class') || '').split(/\s+/).filter(Boolean);
+        var kept = classes.filter(function(name) {
+            return name !== 'column' && name.indexOf('ge-') !== 0;
+        });
+        if (kept.length !== classes.length) { marked = true; }
+        if (kept.length) {
+            node.attr('class', kept.join(' '));
+        } else {
+            node.removeAttr('class');
+        }
+
+        if (marked && this.tagName === 'DIV' && !this.attributes.length) {
+            emptied.push(this);
+        }
+    });
+
+    emptied.forEach(function(div) {
+        $(div).replaceWith($(div).contents());
+    });
+
+    return root[0].innerHTML;
+}
+
 $.fn.gridEditor = function( optionsOrMethod ) {
 
     var self = this;
@@ -264,11 +344,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             'tab_tools'         : [], // Host tools on tab drawers
             'accordion_tools'   : [], // Host tools on accordion item drawers
             'plugins'           : null, // Plugins to use, of any kind; null means every one loaded
+            'row_cols'          : true, // A row's "columns per row" field, row-cols-*
             'utilities'         : {}, // Options for the utility plugins, by plugin name
             'elements'          : NESTED_SETTINGS.elements, // Element level controls, below the column
             'custom_filter'     : '',
             'content_types'     : ['tinymce'],
-            'valid_col_sizes'   : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+            'valid_col_sizes'   : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'equal', 'auto'],
             'valid_col_offsets' : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
             'add_column'        : NESTED_SETTINGS.add_column, // The add column tool
             'layout_modes'      : VIEW_KEYS.slice(), // Which views the dropdown offers
@@ -580,54 +661,91 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /**
-         * Resize a column through the events, writing the tiers the current
-         * view covers: one in a per-breakpoint view, all six in the all view.
+         * What resizing this column to `size` in `view` would write, or null
+         * when the budget refuses it or there is nothing to change.
          *
-         * The budget is checked per tier and the whole change is refused if
-         * any tier has no room, so a resize never half lands.
-         */
-        /**
-         * What resizing this column to `size` would write, or null when the
-         * budget refuses it or there is nothing to change.
+         * A breakpoint view writes its own tier. The all view writes the base
+         * class and takes the size off every other tier, so one size is what
+         * applies everywhere; the plan says what it took off.
          *
          * Refused rather than quietly clamped: the offset is something the
-         * user set, and a tool that rewrites it is a tool that lies. The plan
-         * covers every tier the view writes, so a resize never half lands.
+         * user set, and a tool that rewrites it is a tool that lies. In the
+         * all view the base size has to fit every tier's offset, since it is
+         * the size at every tier once the others are gone.
          */
-        function planSize(col, size) {
-            var tiers = tiersFor(curView);
-            var wanted = tiers.map(function(tier) {
-                return clamp({ size: size, offset: getEffectiveOffset(col, tier) || 0 });
+        function planSize(col, size, view) {
+            view = view || curView;
+
+            if (view !== ALL_VIEW) {
+                var tier = breakpoint(view);
+                var wanted = clamp({ size: size, offset: getEffectiveOffset(col, tier) || 0 });
+
+                if (wanted.refused || getSize(col, tier) === wanted.size) { return null; }
+
+                return { writes: [{ tier: tier, size: wanted.size }], cleared: null, size: wanted.size };
+            }
+
+            var refused = BREAKPOINTS.some(function(each) {
+                return clamp({ size: size, offset: getEffectiveOffset(col, each) || 0 }).refused;
             });
+            if (refused) { return null; }
 
-            if (wanted.some(function(request) { return request.refused; })) { return null; }
+            var base = BREAKPOINTS[0];
+            var writes = [];
+            var cleared = [];
+
+            BREAKPOINTS.slice(1).forEach(function(each) {
+                var own = getSize(col, each);
+                if (own === null) { return; }
 
-            var unchanged = tiers.every(function(tier, i) {
-                return getSize(col, tier) === wanted[i].size;
+                writes.push({ tier: each, size: null });
+                cleared.push({ breakpoint: each.key, value: own });
             });
-            if (unchanged) { return null; }
 
-            return { tiers: tiers, sizes: wanted, size: wanted[0].size };
+            if (getSize(col, base) !== size) { writes.unshift({ tier: base, size: size }); }
+
+            return writes.length ? { writes: writes, cleared: cleared, size: size } : null;
         }
 
         function writeSize(col, plan) {
-            plan.tiers.forEach(function(tier, i) { setSize(col, tier, plan.sizes[i].size); });
+            plan.writes.forEach(function(write) { setSize(col, write.tier, write.size); });
             stripPixelWidths(col);
         }
 
-        /** Resize a column from a tool, announcing it either side. */
-        function resizeColumn(col, size, source) {
+        /** The all view's payloads say what the write took off the breakpoints. */
+        function withCleared(extra, cleared) {
+            if (cleared) { extra.cleared = cleared; }
+            return extra;
+        }
+
+        /**
+         * Resize a column, announcing it either side. `size` is units,
+         * `equal` or `auto`; `view` is the current one unless the size field
+         * of a plugin's panel says otherwise.
+         */
+        function resizeColumn(col, size, source, view) {
+            view = view || curView;
+
             var from = currentSize(col);
-            var plan = planSize(col, size);
+            var plan = planSize(col, size, view);
 
             if (!plan) { return false; }
 
             return operate(function() {
-                var payload = payloadFor('column', col, { source: source, from: from, to: plan.size });
+                var payload = payloadFor('column', col, withCleared({
+                    source: source,
+                    breakpoint: view,
+                    from: from,
+                    to: plan.size,
+                }, plan.cleared));
 
-                if (!emit('before-resize', payload)) { return false; }
+                if (!emit('before-resize', payload)) {
+                    refreshUtilities(col);
+                    return false;
+                }
 
                 writeSize(col, plan);
+                refreshUtilities(col);
                 emit('after-resize', payload);
 
                 return true;
@@ -637,41 +755,49 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         /**
          * Indent a column, shrinking it when the budget needs it: the offset
          * is what the user asked for, so it is the one that gets its way.
+         *
+         * Like a size, an offset is written to the tier being edited, or in
+         * the all view as the base class with every other tier's taken off.
          */
         function indentColumn(col, offset, source) {
-            var tiers = tiersFor(curView);
+            var everywhere = curView === ALL_VIEW;
+            var tier = everywhere ? BREAKPOINTS[0] : breakpoint(curView);
             var from = currentOffset(col);
 
             offset = Math.min(Math.max(offset, 0), MAX_COL_OFFSET);
 
-            var unchanged = tiers.every(function(tier) {
-                return (getOffset(col, tier) || 0) === offset;
-            });
-            if (unchanged) { return false; }
+            var others = everywhere ? BREAKPOINTS.slice(1).filter(function(each) {
+                return getOffset(col, each) !== null;
+            }) : [];
+
+            if ((getOffset(col, tier) || 0) === offset && !others.length) { return false; }
 
             return operate(function() {
-                var payload = payloadFor('column', col, {
+                var payload = payloadFor('column', col, withCleared({
                     source: source,
                     from: from,
                     to: offset,
-                });
+                }, everywhere ? others.map(function(each) {
+                    return { breakpoint: each.key, value: getOffset(col, each) };
+                }) : null));
 
                 if (!emit('before-indent', payload)) { return false; }
 
-                tiers.forEach(function(tier) {
-                    var was = getEffectiveSize(col, tier);
-                    var wanted = clamp({ size: was, offset: offset, leading: 'offset' });
+                setOffset(col, tier, offset);
+                others.forEach(function(each) { setOffset(col, each, 0); });
 
-                    setOffset(col, tier, wanted.offset);
+                // Wherever the column's size and the new offset no longer fit
+                // - one tier, or every tier in the all view - the size gives
+                // way, at that tier only. An equal or auto column fits anywhere.
+                (everywhere ? BREAKPOINTS : [tier]).forEach(function(each) {
+                    var was = getEffectiveSize(col, each);
+                    if (!isUnits(was)) { return; }
 
-                    // Only where the budget actually forced the column to give
-                    // way; otherwise an indent would write size classes for
-                    // tiers nobody asked it to touch
-                    if (wanted.size !== null && wanted.size !== was) {
-                        setSize(col, tier, wanted.size);
-                    }
+                    var wanted = clamp({ size: was, offset: offset, leading: 'offset' });
+                    if (wanted.size !== was) { setSize(col, each, wanted.size); }
                 });
 
+                refreshUtilities(col);
                 emit('after-indent', payload);
 
                 return true;
@@ -770,17 +896,17 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             addRowGroup = $('<div class="ge-addRowGroup btn-group" />').appendTo(wrapper);
             addContainerGroup = $('<div class="ge-addContainerGroup btn-group" />');
             $.each(settings.new_row_layouts, function(j, layout) {
+                var grouped = !Array.isArray(layout);
                 var btn = $('<a class="btn btn-sm btn-primary" />')
-                    .attr('title', t('row.add', { layout: layout.join('-') }))
+                    .attr('title', grouped
+                        ? t('row.add_row_cols', { columns: layout.columns, counts: rowColsText(layout.row_cols) })
+                        : t('row.add', { layout: layout.join('-') }))
                     // What this button makes, in the markup rather than in
                     // jQuery data: a drag works on a clone of it
                     .attr('data-ge-toolbar', 'row')
-                    .attr('data-ge-layout', layout.join(','))
+                    .attr('data-ge-layout', grouped ? JSON.stringify(layout) : layout.join(','))
                     .on('click', function() {
-                        var row = createRow();
-                        layout.forEach(function(i) {
-                            createColumn(i).appendTo(row);
-                        });
+                        var row = rowFromLayoutValue(layout);
 
                         var added = addNode('row', row, function() {
                             row.appendTo(canvas);
@@ -795,10 +921,14 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
                 btn.append('<i class="bi bi-plus"></i>');
 
-                var layoutName = layout.join(' - ');
+                // A row of columns shares out the icon as they share the row;
+                // a row with row-cols draws one line of its widest count
+                var sizes = grouped ? rowColsIcon(layout) : layout;
                 var icon = '<div class="row ge-row-icon">';
-                layout.forEach(function(i) {
-                    icon += '<div class="column col-' + i + '"/>';
+                sizes.forEach(function(size) {
+                    // Closed explicitly: jQuery 4 no longer expands <div/>, and
+                    // each column would be parsed inside the one before
+                    icon += '<div class="column ' + sizeClass(BREAKPOINTS[0], size) + '"></div>';
                 });
                 icon += '</div>';
                 btn.append(icon);
@@ -830,6 +960,29 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 ;
             });
 
+            // A feature plugin's own buttons, beside the containers': what
+            // one makes goes onto the canvas, where the plugin says it belongs
+            $.each(FEATURES, function(name, feature) {
+                (feature.toolbar || []).forEach(function(item, index) {
+                    $('<a class="btn btn-sm btn-primary ge-add-container ge-add-feature" />')
+                        .attr('title', t(item.labelKey))
+                        .attr('data-ge-toolbar', 'feature')
+                        .attr('data-ge-feature', name)
+                        .attr('data-ge-item', index)
+                        .append($('<i />').addClass(item.iconClass || 'bi bi-plus'))
+                        .append($('<span />').text(t(item.labelKey)))
+                        .on('click', function() {
+                            var made = item.create();
+
+                            addNode(item.kind, made, function() {
+                                made.appendTo(canvas);
+                            }, { parent: canvas, source: item.source || 'tool' });
+                        })
+                        .appendTo(addContainerGroup)
+                    ;
+                });
+            });
+
             // Buttons on right
             layoutDropdown = $('<div class="dropdown pull-right ge-layout-mode">' +
                 '<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown"></button>' +
@@ -1005,14 +1158,14 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             if (!under) { return null; }
 
-            var region = $(under).closest('.column, .ge-canvas');
+            var region = $(under).closest(['.column', '.ge-canvas'].concat(pluginHooks('regions')).join(', '));
             if (!region.length || (region[0] !== canvas[0] && !canvas[0].contains(region[0]))) {
                 return null;
             }
 
             var before = null;
 
-            region.children('.row, .ge-content, [data-ge-container]').each(function() {
+            region.children(blockSelector()).each(function() {
                 if (before) { return; }
 
                 var box = this.getBoundingClientRect();
@@ -1022,6 +1175,30 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return { region: region, before: before };
         }
 
+        /**
+         * A feature's toolbar button dropped on the canvas. A region that will
+         * not have what it makes - a section dropped on a column - gives way
+         * to the canvas, just after the top level block the pointer was in.
+         */
+        function insertFeatureFromToolbar(button, where) {
+            var item = FEATURES[button.attr('data-ge-feature')].toolbar[parseInt(button.attr('data-ge-item'), 10)];
+            var made = item.create();
+
+            if (!acceptsBlock(where.region, made)) {
+                var top = where.region.parentsUntil(canvas).addBack().first();
+                where = { region: canvas, before: top.length ? top.next() : null };
+                if (where.before && !where.before.length) { where.before = null; }
+            }
+
+            return addNode(item.kind, made, function() {
+                if (where.before) {
+                    made.insertBefore(where.before);
+                } else {
+                    made.appendTo(where.region);
+                }
+            }, { parent: where.region, source: item.source || 'dragdrop' });
+        }
+
         /** A line where the block would go, following the pointer. */
         function showDropMarker(pageX, pageY) {
             var where = dropPlaceAt(pageX, pageY);
@@ -1048,6 +1225,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * the pointer left it.
          */
         function insertFromToolbar(button, where) {
+            if (button.attr('data-ge-toolbar') === 'feature') {
+                return insertFeatureFromToolbar(button, where);
+            }
+
             var container = button.attr('data-ge-toolbar') === 'container';
             var type = button.attr('data-ge-container-type');
             var made = container
@@ -1072,16 +1253,94 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             }, { parent: where.region, source: 'dragdrop' });
         }
 
+        /**
+         * The column width as a utility family, so the Responsive section of
+         * a column's panel has a field for it: every size, units or not, in
+         * the view being edited. A write is a resize, through the resize
+         * events, not a utility change.
+         */
+        function widthFamily() {
+            var values = [];
+            for (var units = 1; units <= MAX_COL_SIZE; units++) { values.push(String(units)); }
+
+            return {
+                name: 'col',
+                values: values.concat(FLEX_SIZES),
+                appliesTo: ['column'],
+                labelKey: 'utility.col_width',
+                className: function(key, value) { return sizeClass(breakpoint(key), parseSize(value)); },
+                choices: function() { return settings.valid_col_sizes.map(String); },
+                label: function(value) {
+                    if (value === 'equal') { return t('utility.col_equal'); }
+                    if (value === 'auto') { return t('utility.col_auto'); }
+
+                    return value;
+                },
+                write: function(col, value, view, source) {
+                    return resizeColumn(col, value === null ? null : parseSize(value), source, view);
+                },
+                // With no size of its own, a column in a row with row-cols
+                // takes its share from the row, which the field says
+                blank: function(col, view) {
+                    var winner = view === ALL_VIEW ? null : rowColsWinner(col, breakpoint(view));
+                    return winner ? t('utility.col_from_row', { count: rowColsLabel(winner.value) }) : null;
+                },
+            };
+        }
+
+        /** A size as markup or a select carries it: '4' is 4, 'equal' and 'auto' are themselves. */
+        function parseSize(size) {
+            return /^\d+$/.test(String(size)) ? parseInt(size, 10) : size;
+        }
+
+        /** A row from a toolbar button's data-ge-layout: sizes, or a row-cols layout as JSON. */
         function rowFromLayout(layout) {
+            if (/^\s*\{/.test(layout || '')) { return rowFromLayoutValue(JSON.parse(layout)); }
+
+            return rowFromLayoutValue((layout || '').split(',').filter(function(size) {
+                return size !== '';
+            }).map(parseSize));
+        }
+
+        /**
+         * A row from a layout: an array of sizes, or { row_cols, columns } -
+         * row-cols per breakpoint, and that many columns sized by the row.
+         */
+        function rowFromLayoutValue(layout) {
             var row = createRow();
 
-            (layout || '').split(',').forEach(function(size) {
-                if (size !== '') { createColumn(parseInt(size, 10)).appendTo(row); }
+            if (Array.isArray(layout)) {
+                layout.forEach(function(size) { createColumn(size).appendTo(row); });
+                return row;
+            }
+
+            $.each(layout.row_cols || {}, function(key, value) {
+                var tier = breakpoint(key);
+                if (tier && ROW_COLS_VALUES.indexOf(String(value)) !== -1) { row.addClass(rowColsClass(tier, value)); }
             });
 
+            for (var i = 0; i < (layout.columns || 0); i++) { createColumn(null).appendTo(row); }
+
             return row;
         }
 
+        /** "1, md: 3": a row-cols layout's counts, for its button's title. */
+        function rowColsText(counts) {
+            return BREAKPOINTS.filter(function(tier) { return counts && counts[tier.key] !== undefined; })
+                .map(function(tier) { return (tier.infix ? tier.key + ': ' : '') + counts[tier.key]; })
+                .join(', ');
+        }
+
+        /** The icon of a row-cols layout: one line of equal columns, as many as its widest count. */
+        function rowColsIcon(layout) {
+            var widest = 1;
+            $.each(layout.row_cols || {}, function(key, value) {
+                if (value !== 'auto') { widest = Math.max(widest, parseInt(value, 10) || 1); }
+            });
+
+            return Array.apply(null, Array(Math.min(widest, layout.columns || widest))).map(function() { return 'equal'; });
+        }
+
         function onScroll(e) {
             var $window = $(window);
             
@@ -1168,6 +1427,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             // one that rebuilt its area's DOM brought the preview styles back
             // with it, and the attribute recording them came back too
             clearPreviews(canvas);
+            canvas.find('[data-ge-row-cols]').removeAttr('data-ge-row-cols');
             unmarkContainers();
             removeSortable();
             removeResizable();
@@ -1186,6 +1446,23 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return html;
         }
 
+        /**
+         * One node's markup, as getHtml would give it: the canvas goes out of
+         * editing to read it and comes back, as it does for getHtml.
+         */
+        function nodeHtml(node) {
+            deinit();
+            stripPixelWidths(node);
+            var html = node[0].outerHTML;
+            init();
+            return html;
+        }
+
+        /** getHtml with grid-editor's own classes and attributes taken off. */
+        function getPlainHtml() {
+            return plainHtml(getHtml());
+        }
+
         function destroy() {
             deinit();
             removeConfirmModal();
@@ -1236,6 +1513,9 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          */
         function loadPlugins() {
             var api = pluginApi();
+
+            registerFamily('grid', {}, widthFamily());
+            if (settings.row_cols !== false) { registerFamily('grid', {}, rowColsFamily()); }
             var wanted = function(name) {
                 return !settings.plugins || settings.plugins.indexOf(name) !== -1;
             };
@@ -1321,6 +1601,14 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 getUtility: getUtility,
                 setUtility: setUtility,
                 utilityField: utilityField,
+                bareStyle: bareStyle,
+                rowFromLayout: rowFromLayoutValue,
+                nodeHtml: nodeHtml,
+                toolbarItems: function(name) {
+                    return mainControls
+                        ? mainControls.find('[data-ge-toolbar="feature"][data-ge-feature="' + name + '"]')
+                        : $();
+                },
             };
         }
 
@@ -1392,6 +1680,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         function utilityClass(family, tier, value) {
+            if (family.className) { return family.className(tier.key, value); }
+
             return family.prefix + (tier.infix ? '-' + tier.infix : '') + '-' + value;
         }
 
@@ -1538,6 +1828,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 return false;
             }
 
+            // A family whose writes are some other operation - the column
+            // width, which is a resize - does them its own way
+            if (family.write) { return family.write(node, value, view, options.source || 'api'); }
+
             var plan = planUtility(node, family, view, value);
             if (!plan) { return false; }
 
@@ -1568,6 +1862,29 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             });
         }
 
+        /**
+         * ge.bareStyle(node, family, property): what a css property comes to
+         * on a node with none of the family's classes, at any breakpoint. The
+         * answer a preview needs for "no class applies here" when that is not
+         * a constant: text-align inherits from the parent, and the host's own
+         * css may float an element. The browser is the only one who knows, so
+         * the classes come off for the moment it takes to ask.
+         */
+        function bareStyle(node, name, property) {
+            var family = familyNamed(name, 'bareStyle');
+            node = $(node).first();
+            if (!family || !node.length) { return null; }
+
+            var original = node.attr('class');
+            BREAKPOINTS.forEach(function(tier) { writeUtility(node, family, tier, null); });
+
+            var value = getComputedStyle(node[0]).getPropertyValue(property);
+
+            if (original === undefined) { node.removeAttr('class'); } else { node.attr('class', original); }
+
+            return value;
+        }
+
         /** Bring a node's panel and preview up to date with its classes. */
         function refreshUtilities(node) {
             var details = node.children('.ge-tools-drawer').children('.ge-details');
@@ -1598,6 +1915,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             if (curView !== ALL_VIEW) { previewTier(scope, breakpoint(curView)); }
 
+            markRowCols(scope);
+
             // Whatever a plugin marks the canvas with to show its utilities
             // goes stale at the same moments the preview does
             plugins('onRefresh', scope);
@@ -1615,6 +1934,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     $.extend(styles, family.preview(effectiveUtility(node, family, tier), node, kind));
                 });
 
+                if (kind === 'column') { $.extend(styles, rowColsPreview(node, tier)); }
+
                 // A plugin whose families settle one property between them
                 // previews the node as a whole
                 $.each(UTILITIES, function(name, utility) {
@@ -1778,6 +2099,11 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 blank = inherited
                     ? t('utility.inherit', { value: labelOf(family, inherited.value), breakpoint: inherited.tier.key })
                     : t('utility.default');
+
+                // What the empty choice means is sometimes not the family's
+                // own business: a column's width can come from its row
+                var custom = family.blank ? family.blank(node, curView) : null;
+                if (custom && own === null) { blank = custom; }
             }
 
             // A value the markup carries is shown even when the family
@@ -1876,17 +2202,6 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             createMoveTool(drawer);
             addSettingsTool(drawer, container, settings.container_classes);
-            if (definition.addPane) {
-                createTool(drawer, t(definition.addPaneKey), 'ge-add-pane', 'bi bi-plus-circle', function() {
-                    var pane = definition.addPane(container, {});
-
-                    addNode(definition.paneKind, pane, function() {}, {
-                        parent: container,
-                        source: 'tool',
-                        container: container,
-                    });
-                });
-            }
 
             settings.container_tools.forEach(function(hostTool) {
                 createTool(drawer, hostTool.title || '', hostTool.className || '',
@@ -1900,6 +2215,19 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     container.slideUp(removed);
                 });
             });
+
+            // Delete then add, the order rows and columns have
+            if (definition.addPane) {
+                createTool(drawer, t(definition.addPaneKey), 'ge-add-pane', 'bi bi-plus-circle', function() {
+                    var pane = definition.addPane(container, {});
+
+                    addNode(definition.paneKind, pane, function() {}, {
+                        parent: container,
+                        source: 'tool',
+                        container: container,
+                    });
+                });
+            }
         }
 
         /**
@@ -2129,9 +2457,10 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             settings.valid_col_sizes.forEach(function(size) {
                 $('<a class="ge-size" />')
                     .attr('data-ge-size', size)
-                    .attr('title', t('tool.column_size', { size: size }))
-                    .toggleClass('ge-size-tight', size > room)
-                    .text(size)
+                    .attr('title', sizeTitle(size))
+                    .toggleClass('ge-size-tight', isUnits(size) && size > room)
+                    .toggleClass('ge-size-flex', !isUnits(size))
+                    .text(isUnits(size) ? size : sizeClass(BREAKPOINTS[0], size))
                     .on('click', function(e) {
                         e.preventDefault();
                         e.stopPropagation();
@@ -2152,6 +2481,13 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /** True when there was one to close, which is also a click's answer. */
+        function sizeTitle(size) {
+            if (size === 'equal') { return t('tool.column_equal'); }
+            if (size === 'auto') { return t('tool.column_auto'); }
+
+            return t('tool.column_size', { size: size });
+        }
+
         function closeSizePicker() {
             if (!sizePicker) { return false; }
 
@@ -2183,7 +2519,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 createTool(drawer, t('tool.add_column'), 'ge-add-column', 'bi bi-plus-circle', function() {
                     if (closeSizePicker()) { return; } // The picker was open: that was the answer
 
-                    addColumnTo(row, settings.add_column.size);
+                    // In a row with row-cols the new column takes its share
+                    addColumnTo(row, rowColsSource(row, leadingTier()) ? null : settings.add_column.size);
                 });
 
                 attachSizePicker(drawer.find('> .ge-add-column'), row);
@@ -2203,12 +2540,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 createTool(drawer, t('tool.column_narrower'), 'ge-decrease-col-width', 'bi bi-dash-lg', function(e) {
                     resizeColumn(col, e.shiftKey
                         ? smallest(settings.valid_col_sizes)
-                        : stepThrough(settings.valid_col_sizes, currentSize(col), -1),
+                        : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), -1),
                         'tool');
                 });
 
                 createTool(drawer, t('tool.column_wider'), 'ge-increase-col-width', 'bi bi-plus-lg', function(e) {
-                    resizeColumn(col, e.shiftKey ? widestFor(col) : stepThrough(settings.valid_col_sizes, currentSize(col), 1), 'tool');
+                    resizeColumn(col, e.shiftKey
+                        ? widestFor(col)
+                        : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), 1),
+                        'tool');
                 });
 
                 createTool(drawer, t('tool.indent_decrease'), 'ge-decrease-col-offset', 'bi bi-text-indent-right', function(e) {
@@ -2259,17 +2599,43 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * view it is the widest tier, because the canvas is not constrained
          * there and the widest tier is what the user is looking at: clicking
          * "narrower" on a column authored as col-lg-6 should take it to 5,
-         * not to 11 because no xs class was ever written.
+         * not to 11 because no base class was ever written. What the all view
+         * writes is the base class all the same.
          */
         function leadingTier() {
             return curView === ALL_VIEW ? BREAKPOINTS[BREAKPOINTS.length - 1] : breakpoint(curView);
         }
 
+        /** The size that applies in the view: units, `equal` or `auto`. */
         function currentSize(col) {
-            var size = getEffectiveSize(col, leadingTier());
+            var tier = leadingTier();
+
+            // Sized by its row: it has no size of its own to report
+            if (rowColsWinner(col, tier)) { return null; }
+
+            var size = getEffectiveSize(col, tier);
             return size === null ? MAX_COL_SIZE : size;
         }
 
+        /**
+         * The size in units, which is what the tools step through. An equal
+         * or auto column has no number, so it is measured: the width it has
+         * on the canvas, in twelfths of its row.
+         */
+        function currentUnits(col) {
+            var size = currentSize(col);
+            if (isUnits(size)) { return size; }
+
+            var units = Math.round(col.outerWidth() / rowContentWidth(col.parent()) * MAX_COL_SIZE);
+            return Math.min(Math.max(units, 1), MAX_COL_SIZE);
+        }
+
+        function rowContentWidth(row) {
+            var style = window.getComputedStyle(row[0]);
+
+            return row[0].clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+        }
+
         function currentOffset(col) {
             return getEffectiveOffset(col, leadingTier()) || 0;
         }
@@ -2289,11 +2655,11 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         function smallest(values) {
-            return values.reduce(function(a, b) { return Math.min(a, b); }, MAX_COL_SIZE);
+            return values.filter(isUnits).reduce(function(a, b) { return Math.min(a, b); }, MAX_COL_SIZE);
         }
 
         function largest(values) {
-            return values.reduce(function(a, b) { return Math.max(a, b); }, 0);
+            return values.filter(isUnits).reduce(function(a, b) { return Math.max(a, b); }, 0);
         }
 
         /**
@@ -2311,7 +2677,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * itself left inside the row.
          */
         function deepestFor(col) {
-            var room = spare(col.parent(), leadingTier(), col) - currentSize(col);
+            var room = spare(col.parent(), leadingTier(), col) - currentUnits(col);
 
             return Math.min(largest(settings.valid_col_offsets), Math.max(room, 0));
         }
@@ -2354,6 +2720,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         function isEditorClass(name) {
             if (name === 'row' || name === 'column') { return true; }
             if (/^(ge-|ui-)/.test(name)) { return true; }
+            if (/^col(-(sm|md|lg|xl|xxl))?(-auto)?$/.test(name)) { return true; }
 
             return BREAKPOINTS.some(function(tier) {
                 return new RegExp('^(' + tier.colPrefix + '|' + tier.offsetPrefix + ')\\d+$').test(name);
@@ -2382,11 +2749,16 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             });
 
             // Beside the gear, because every node that has one is a node a
-            // utility may apply to, whichever plugin built its drawer
+            // utility may apply to, whichever plugin built its drawer. A
+            // feature plugin's tools go there too, for the same reason: the
+            // gear is the one tool every drawer has.
             var kind = kindOf(node);
             $.each(UTILITIES, function(name, utility) {
                 if (utility.drawerTools) { utility.drawerTools(drawer, node, kind); }
             });
+            $.each(FEATURES, function(name, feature) {
+                if (feature.drawerTools) { feature.drawerTools(drawer, node, kind); }
+            });
 
             return details.appendTo(drawer);
         }
@@ -2452,15 +2824,137 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * column that had none.
          */
         function addAllColClasses() {
-            canvas.find('.column, div[class*="col-"]').each(function() {
+            canvas.find('.column, div[class*="col-"], div.col').each(function() {
                 var col = $(this).addClass('column');
 
-                if (sizedTiers(col).length) { return; }
+                // A column in a row with row-cols is sized by its row
+                if (sizedTiers(col).length || hasRowCols(col.parent())) { return; }
 
                 setSize(col, BREAKPOINTS[0], MAX_COL_SIZE);
             });
         }
 
+        /* --------------------------------------------------------------
+         * Columns per row: row-cols-*.
+         *
+         * A row's row-cols class gives every child an equal share of a
+         * line, and a column's own size class takes that share's place.
+         * Which of the two wins at a breakpoint is settled the way
+         * Bootstrap's css settles it: the class from the wider breakpoint,
+         * and at one breakpoint col loses to row-cols, which loses to
+         * col-auto and col-N - the order Bootstrap writes their rules in.
+         * -------------------------------------------------------------- */
+
+        function hasRowCols(row) {
+            return row.hasClass('row') && BREAKPOINTS.some(function(tier) {
+                return ROW_COLS_VALUES.some(function(value) { return row.hasClass(rowColsClass(tier, value)); });
+            });
+        }
+
+        /** The row-cols class that applies to a row at a tier, as { tier, value }, or null. */
+        function rowColsSource(row, tier) {
+            if (!row.hasClass('row')) { return null; }
+
+            for (var i = BREAKPOINTS.indexOf(tier); i >= 0; i--) {
+                for (var v = 0; v < ROW_COLS_VALUES.length; v++) {
+                    if (row.hasClass(rowColsClass(BREAKPOINTS[i], ROW_COLS_VALUES[v]))) {
+                        return { tier: i, value: ROW_COLS_VALUES[v] };
+                    }
+                }
+            }
+
+            return null;
+        }
+
+        /** The column's own size that applies at a tier, as { tier, size }, or null. */
+        function columnSource(col, tier) {
+            for (var i = BREAKPOINTS.indexOf(tier); i >= 0; i--) {
+                var size = getSize(col, BREAKPOINTS[i]);
+                if (size !== null) { return { tier: i, size: size }; }
+            }
+
+            return null;
+        }
+
+        /**
+         * The row-cols class that sizes this column at a tier, or null when
+         * the column's own size does.
+         */
+        function rowColsWinner(col, tier) {
+            var row = rowColsSource(col.parent(), tier);
+            if (!row) { return null; }
+
+            var own = columnSource(col, tier);
+            if (!own || row.tier > own.tier) { return row; }
+
+            return row.tier === own.tier && own.size === 'equal' ? row : null;
+        }
+
+        /** A column's share of a line when its row sizes it, in units: auto has no number. */
+        function rowColsUnits(winner) {
+            return winner.value === 'auto' ? 0 : MAX_COL_SIZE / parseInt(winner.value, 10);
+        }
+
+        /**
+         * What a breakpoint view shows of the row-cols a column is under. The
+         * view narrows the canvas, not the window, and Bootstrap's
+         * .row-cols-md-3 > * answers to the window - and to nothing the
+         * preview can put on the row, since it styles the row's children.
+         */
+        function rowColsPreview(col, tier) {
+            var winner = rowColsWinner(col, tier);
+
+            if (winner) {
+                return {
+                    flex: '0 0 auto',
+                    width: winner.value === 'auto' ? 'auto' : (100 / parseInt(winner.value, 10)) + '%',
+                    'max-width': '100%',
+                };
+            }
+
+            // A wider breakpoint's row-cols is live in a wide window; a
+            // column with no size of its own here is a full width one
+            if (hasRowCols(col.parent()) && !columnSource(col, tier)) {
+                return { flex: '0 0 auto', width: '100%', 'max-width': '100%' };
+            }
+
+            return {};
+        }
+
+        /**
+         * The badge on a row whose columns are sized by row-cols in the view,
+         * and in the all view by its row-cols with no breakpoint.
+         */
+        function markRowCols(scope) {
+            scope.find('.row').addBack('.row').each(function() {
+                var row = $(this);
+                var source = settings.row_cols === false ? null : (curView === ALL_VIEW
+                    ? (rowColsSource(row, BREAKPOINTS[0]) || null)
+                    : rowColsSource(row, breakpoint(curView)));
+
+                if (!source) {
+                    row.removeAttr('data-ge-row-cols');
+                } else {
+                    row.attr('data-ge-row-cols', rowColsLabel(source.value));
+                }
+            });
+        }
+
+        function rowColsLabel(value) {
+            return value === 'auto' ? t('badge.row_cols_auto') : t('badge.row_cols', { count: value });
+        }
+
+        /** The core's family for the field in a row's panel. */
+        function rowColsFamily() {
+            return {
+                name: 'row-cols',
+                prefix: 'row-cols',
+                values: ROW_COLS_VALUES,
+                appliesTo: ['row'],
+                labelKey: 'utility.row_cols',
+            };
+        }
+
         /* --------------------------------------------------------------
          * The sizing core.
          *
@@ -2470,9 +2964,18 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * names, the 12 unit budget and what an absent class means.
          * -------------------------------------------------------------- */
 
-        /** The units a column is given at one tier, or null if that tier says nothing. */
+        /**
+         * A column's size at one tier: a number of units, `equal`, `auto`, or
+         * null when that tier says nothing.
+         */
         function getSize(col, tier) {
-            return readUnits(col, tier.colPrefix);
+            var units = readUnits(col, tier.colPrefix);
+            if (units !== null) { return units; }
+
+            if (col.hasClass(sizeClass(tier, 'auto'))) { return 'auto'; }
+            if (col.hasClass(sizeClass(tier, 'equal'))) { return 'equal'; }
+
+            return null;
         }
 
         /** The units a column is indented by at one tier, or null. */
@@ -2522,8 +3025,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             col.attr('class', classes.join(' '));
         }
 
-        function setSize(col, tier, units) {
-            writeUnits(col, tier.colPrefix, units);
+        /** One size per tier: writing a size takes whatever size the tier had off. */
+        function setSize(col, tier, size) {
+            writeUnits(col, tier.colPrefix, null);
+            FLEX_SIZES.forEach(function(flex) { col.removeClass(sizeClass(tier, flex)); });
+
+            if (size !== null && size !== undefined) { col.addClass(sizeClass(tier, size)); }
         }
 
         /** An offset of 0 is written as no class at all, which is what it means. */
@@ -2549,7 +3056,11 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 var sibling = $(this);
                 if (ignore && sibling[0] === ignore[0]) { return; }
 
-                used += (getEffectiveSize(sibling, tier) || 0) + (getEffectiveOffset(sibling, tier) || 0);
+                // An equal or auto column takes what is left, so it uses none;
+                // one its row sizes uses its share of the line
+                var winner = rowColsWinner(sibling, tier);
+                var size = winner ? rowColsUnits(winner) : getEffectiveSize(sibling, tier);
+                used += (isUnits(size) ? size : 0) + (getEffectiveOffset(sibling, tier) || 0);
             });
 
             return MAX_COL_SIZE - used;
@@ -2570,7 +3081,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
             offset = Math.min(Math.max(offset, 0), MAX_COL_OFFSET);
 
-            if (size === null) { return { size: null, offset: offset, refused: false }; }
+            if (size === null || !isUnits(size)) { return { size: size, offset: offset, refused: false }; }
 
             size = Math.min(Math.max(size, 1), MAX_COL_SIZE);
 
@@ -2614,6 +3125,35 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return 'ge-' + name + '-' + instanceId;
         }
 
+        /**
+         * What the canvas, the columns and the plugins' regions move: rows,
+         * content areas and containers, and whatever blocks a feature adds -
+         * the sections plugin's sections.
+         */
+        function blockSelector() {
+            return ['.row', '.ge-content', '[data-ge-container]'].concat(pluginHooks('blocks')).join(', ');
+        }
+
+        /** A selector every feature plugin may contribute to, under one name. */
+        function pluginHooks(name) {
+            return $.map(FEATURES, function(feature) { return feature[name] || null; });
+        }
+
+        /**
+         * Whether a region will have a block dropped in it. Every block goes
+         * everywhere unless a feature says otherwise: a section only on the
+         * canvas, and only rows in a section.
+         */
+        function acceptsBlock(region, node) {
+            var accepted = true;
+
+            $.each(FEATURES, function(name, feature) {
+                if (accepted && feature.accepts && feature.accepts(region, node) === false) { accepted = false; }
+            });
+
+            return accepted;
+        }
+
         /** What must never start a drag, whatever the handle is. */
         function dragCancelSelector() {
             return settings.drag_handle === 'drawer'
@@ -2651,6 +3191,16 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                     ? { name: groupName(options.group) }
                     : { name: groupName(options.draggable + '-' + (++soloGroup)), pull: false, put: false };
 
+                // A list may turn some of its group's items away. A put
+                // function replaces SortableJS's own test that the item comes
+                // from the same group, so it makes that test too: without it
+                // a column would drop into the canvas, or into another editor
+                if (options.group && options.accepts) {
+                    group.put = function(to, from, dragged) {
+                        return from.options.group.name === group.name && options.accepts($(to.el), $(dragged));
+                    };
+                }
+
                 sortables.push(window.Sortable.create(list, $.extend({
                     group: group,
                     draggable: options.draggable,
@@ -2715,10 +3265,25 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             });
 
             sortable(canvas.add(canvas.find('.column')), {
-                draggable: '.row, .ge-content, [data-ge-container]',
+                draggable: blockSelector(),
                 group: 'block',
+                accepts: acceptsBlock,
             });
 
+            // A plugin's region can be a block itself - a section is both -
+            // and SortableJS tests a list's own element against the draggable
+            // selector when it counts the list's children, so every child of
+            // a section would count as a block, its drawer first. '>' is
+            // SortableJS for "direct children only", which the list is not.
+            var regions = pluginHooks('regions');
+            if (regions.length) {
+                sortable(canvas.find(regions.join(', ')), {
+                    draggable: '>' + blockSelector(),
+                    group: 'block',
+                    accepts: acceptsBlock,
+                });
+            }
+
             // A plugin makes its own: only it knows which of its parts move
             plugins('onSortable', sortable);
         }
@@ -2889,20 +3454,21 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * divider between two columns looks like it should do.
          */
         function snapUnits(col, pixels) {
-            var row = col.parent();
-            var style = window.getComputedStyle(row[0]);
-            var content = row[0].clientWidth -
-                parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
-
-            var units = Math.round(pixels / content * MAX_COL_SIZE);
+            var units = Math.round(pixels / rowContentWidth(col.parent()) * MAX_COL_SIZE);
             var next = balanceSibling(col);
+            var nextSize = next ? currentSize(next) : null;
+
+            // Measured when the drag started: the column is the width of the
+            // pointer now, which is not what it was
+            var own = col.data('ge-resize-units');
 
             // With a sibling to balance against, the drag may take that
             // column's units but not its last one. Without one, the row is
             // allowed to wrap - that is what balance false means - so the only
             // limit is the column's own budget against its indent.
-            var room = next
-                ? currentSize(col) + currentSize(next) - smallest(settings.valid_col_sizes)
+            // An equal or auto sibling gives way by itself, so it sets no limit
+            var room = next && isUnits(nextSize)
+                ? own + nextSize - smallest(settings.valid_col_sizes)
                 : MAX_COL_SIZE - currentOffset(col);
 
             return Math.min(
@@ -2948,7 +3514,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             if (!allowed) { return false; }
 
             col.data('ge-resize-from', from);
-            resizeReadout(col, sizeLabel(from));
+            col.data('ge-resize-units', currentUnits(col));
+            resizeReadout(col, sizeLabel(col.data('ge-resize-units')));
 
             return true;
         }
@@ -2959,30 +3526,33 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
         function resizeStop(col, width) {
             var from = col.data('ge-resize-from');
+            var started = col.data('ge-resize-units');
             var units = snapUnits(col, width);
 
-            col.removeData('ge-resize-from');
+            col.removeData('ge-resize-from').removeData('ge-resize-units');
             resizeReadout(col, '');
             stripPixelWidths(col);
 
             if (from === undefined) { return; }
 
             // A drag of a couple of pixels lands on the size it started from,
-            // and is not a resize
-            if (units === from) { return; }
+            // and is not a resize - not even of an equal or auto column,
+            // which it would otherwise turn into a number
+            if (units === started) { return; }
 
             var plan = planSize(col, units);
             if (!plan) { return; }
 
             operate(function() {
                 writeSize(col, plan);
-                balanceAfterResize(col, plan.size - from);
+                balanceAfterResize(col, units - started);
+                refreshUtilities(col);
 
-                emit('after-resize', payloadFor('column', col, {
+                emit('after-resize', payloadFor('column', col, withCleared({
                     source: 'dragdrop',
                     from: from,
                     to: plan.size,
-                }));
+                }, plan.cleared)));
             });
         }
 
@@ -2990,12 +3560,22 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          * Move the delta into the following column, so a full row stays full.
          * It is part of the same gesture, so it is not announced separately.
          */
+        /**
+         * The column after takes what the resized one gave or took, unless it
+         * is equal or auto: those take what is left by themselves.
+         */
         function balanceAfterResize(col, delta) {
             var next = balanceSibling(col);
             if (!next || !delta) { return; }
 
-            var plan = planSize(next, currentSize(next) - delta);
-            if (plan) { writeSize(next, plan); }
+            var size = currentSize(next);
+            if (!isUnits(size)) { return; }
+
+            var plan = planSize(next, size - delta);
+            if (plan) {
+                writeSize(next, plan);
+                refreshUtilities(next);
+            }
         }
 
         /**
@@ -3045,7 +3625,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             var add = function() {
                 return addNode(kind, node, function() {
                     node[placement](options[placement]);
-                }, { parent: parent, source: 'api' });
+                }, { parent: parent, source: options.source || 'api' });
             };
 
             if (operationDepth > 0) {
@@ -3062,13 +3642,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         function apiCreateRow(layout, options) {
             var row = createRow();
 
-            if (layout !== undefined && !Array.isArray(layout)) {
-                warn('createRow: the layout is an array of column sizes, as in [8, 4]. ' +
-                    'Making an empty row instead.');
+            if (layout !== undefined && !Array.isArray(layout) && !(layout && layout.row_cols)) {
+                warn('createRow: the layout is an array of column sizes, as in [8, 4], or ' +
+                    '{ row_cols, columns }. Making an empty row instead.');
                 layout = [];
             }
 
-            (layout || []).forEach(function(size) {
+            if (layout && !Array.isArray(layout)) { row = rowFromLayoutValue(layout); }
+
+            (Array.isArray(layout) ? layout : []).forEach(function(size) {
                 createColumn(size).appendTo(row);
             });
 
@@ -3081,7 +3663,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         function apiCreateColumn(size, options) {
             options = options || {};
 
-            if (typeof size != 'number') {
+            // Going into a row with row-cols, no size is a size: the row's share
+            var into = $(options.appendTo || options.prependTo || []).first();
+
+            if (size === undefined && into.length && rowColsSource(into, leadingTier())) {
+                size = null;
+            } else if (!isUnits(size) && FLEX_SIZES.indexOf(size) === -1) {
                 warn('createColumn: no column size given, using ' + MAX_COL_SIZE);
                 size = MAX_COL_SIZE;
             }
@@ -3152,8 +3739,8 @@ $.fn.gridEditor = function( optionsOrMethod ) {
         }
 
         /**
-         * A column sized for the current view: one tier, or every tier in the
-         * all view. `offset` indents it, within the same 12 unit budget.
+         * A column sized for the current view: its tier, or the base class in
+         * the all view. `offset` indents it, within the same 12 unit budget.
          */
         function createColumn(size, offset) {
             var rte = getRTE(settings.content_types[0]);
@@ -3161,12 +3748,12 @@ $.fn.gridEditor = function( optionsOrMethod ) {
                 .append(createDefaultContentWrapper().html(rte ? rte.initialContent : ''))
             ;
 
-            tiersFor(curView).forEach(function(tier) {
-                var wanted = clamp({ size: size, offset: offset || 0, leading: 'offset' });
+            // The tier being edited, or the base class in the all view
+            var tier = tiersFor(curView)[0];
+            var wanted = clamp({ size: size, offset: offset || 0, leading: 'offset' });
 
-                setSize(column, tier, wanted.size === null ? size : wanted.size);
-                setOffset(column, tier, wanted.offset);
-            });
+            setSize(column, tier, wanted.size === null ? size : wanted.size);
+            setOffset(column, tier, wanted.offset);
 
             return column;
         }
@@ -3232,11 +3819,19 @@ $.fn.gridEditor = function( optionsOrMethod ) {
             return $();
         }
 
+        /**
+         * A content area for the first content type. With no content types
+         * it is a content area and nothing more: there is no type to name.
+         */
         function createDefaultContentWrapper() {
-            return $('<div/>')
-                .addClass('ge-content ge-content-type-' + settings.content_types[0])
-                .attr('data-ge-content-type', settings.content_types[0])
-            ;
+            var type = settings.content_types[0];
+            var contentArea = $('<div class="ge-content"/>');
+
+            if (type) {
+                contentArea.addClass('ge-content-type-' + type).attr('data-ge-content-type', type);
+            }
+
+            return contentArea;
         }
 
         /**
@@ -3304,6 +3899,7 @@ $.fn.gridEditor = function( optionsOrMethod ) {
          */
         var handle = {
             getHtml: getHtml,
+            getPlainHtml: getPlainHtml,
             // init and reset are deferred when a handler calls them, so an
             // operation in flight finishes before the canvas is rebuilt
             init: function() { defer(init); },
@@ -3324,6 +3920,15 @@ $.fn.gridEditor = function( optionsOrMethod ) {
 
                 return featureMethods.createElement(content, options);
             },
+            createSection: function(options) {
+                if (!featureMethods.createSection) {
+                    warnOnceHere('plugin:sections', 'createSection needs the sections plugin: ' +
+                        'include dist/plugins/grideditor.sections.js after the editor');
+                    return null;
+                }
+
+                return featureMethods.createSection(options);
+            },
             createContainer: apiCreateContainer,
             addTab: function(container, options) { return addPaneTo(container, 'tabs', options); },
             addAccordionItem: function(container, options) {
@@ -3416,6 +4021,8 @@ $.fn.gridEditor.locales = {
         'tool.add_row': 'Add row',
         'tool.add_column': 'Add column\n(hold to choose the width)',
         'tool.column_size': '{size} of 12',
+        'tool.column_equal': 'Equal: shares what the row has left',
+        'tool.column_auto': 'Auto: as wide as its content',
         'tool.delete_row': 'Remove row',
         'tool.delete_column': 'Remove col',
         'tool.delete_container': 'Remove container',
@@ -3433,6 +4040,7 @@ $.fn.gridEditor.locales = {
         'tool.classes_title': 'Css classes, separated by spaces',
         'tool.toggle_class': 'Toggle "{label}" styling',
         'row.add': 'Add row {layout}',
+        'row.add_row_cols': 'Add a row of {columns} columns, {counts} per row',
         'confirm.title': 'Confirm',
         'confirm.ok': 'Delete',
         'confirm.cancel': 'Cancel',
@@ -3447,6 +4055,13 @@ $.fn.gridEditor.locales = {
         'view.xl': 'Large desktop',
         'view.xxl': 'Widescreen',
         'utility.section': 'Responsive: {view}',
+        'utility.col_width': 'Width',
+        'utility.col_equal': 'Equal',
+        'utility.col_auto': 'Auto',
+        'utility.col_from_row': 'From the row: {count}',
+        'utility.row_cols': 'Columns per row',
+        'badge.row_cols': '{count} per row',
+        'badge.row_cols_auto': 'As wide as their content',
         'utility.default': 'Default',
         'utility.inherit': 'Inherit: {value} (from {breakpoint})',
         'utility.varies': 'Changes at {breakpoints}; choosing here replaces that',