Gridbox 3. Grid System Modernization

Gridbox has always been about creative freedom. But any freedom is built on structure. In Gridbox, that structure is the grid — the foundation on which every page, every layout, and every design decision is built.

We didn’t just update the grid, we rethought the entire way you interact with it. The code became cleaner, controls more logical, and the interface calmer and more modern. In this blog post, we’ll take a detailed look at how the grid and its related tools have changed, and why these improvements make your workflow faster, more enjoyable, and more professional.

The grid is the backbone of the Joomla website builder Gridbox. It holds the entire page structure. With Gridbox 3, we've done a major modernization of the grid, bringing it up to modern standards.

If you compare the code of the current Gridbox version with Gridbox 3, the difference is clear. We didn’t just reduce the code size, we applied modern approaches and migrated the grid to an up-to-date format. Gridbox 3 puts modern technologies in your hands, allowing you to work more productively, faster, and with greater enjoyment.

New Grid Management

One of the most noticeable changes in Gridbox 3 is the new grid control model. In current versions of Gridbox, grid control is handled through gear icons (element control panels). Sections, rows, columns, and nested rows each have their own control panels, which can sometimes overlap, creating visual and functional discomfort.

In Gridbox 3, we completely abandoned this model. Gear icons with actions like copy, edit, and similar controls are no longer used.

So how does grid management work now? The interaction model with the Editor has been completely reworked. All control is now based on direct interaction:

• Click on an item. Its settings open in the Control Panel
• Right-click. Quick access to extended options
• Shortcuts. Instant actions without unnecessary mouse clicks.

No more extra movements or overlapping UI elements. This approach makes work faster, more intuitive, and more user-friendly. You interact with the Editor as naturally as you would with any professional software.

We’d also like to once again draw your attention to an often underestimated Gridbox tool — Keyboard Shortcuts. Copying, pasting, closing modals, copying styles, and more now feel even more fluid and fast.

Box Model Color Updates

We updated the box model colors. They now feel softer, more elegant, and visually calmer. The new color scheme is easier on the eyes and doesn’t distract from working with content.

This change is best illustrated with an example. So take a look at the screenshot below.

Column Gaps on Mobile

In current versions of Gridbox, there are no gaps between columns on mobile devices. This was a weak point, and in Gridbox 3, it has been changed. 

You can now set a gap between columns and control it separately for each mobile device.

As a result, your mobile layouts look cleaner and more predictable, without additional workarounds.

Our goal was to preserve Gridbox's predictable behavior, so the basic principle of creating sections, rows, and columns remains unchanged.

Previously, creating a section opened a separate modal for choosing the number of columns, with its own custom styles. Since one of Gridbox 3’s key goals is interface unification, we moved away from this approach. Gridbox 3 now uses a classic native modal, with a simple and clear dropdown for selecting the number of columns.

At first glance, it may seem that the Control Panel in Gridbox 3 hasn’t changed much. This impression is misleading. In reality, we completely rebuilt the Control Panel, from its structure to the code. We went through it from top to bottom, line by line.

Layout Switching

Previously, switching layouts required clicking an icon and then selecting the desired variant. In Gridbox 3, this process has been simplified. Now, switching between layouts is done using a single, changing icon. Fewer clicks, fewer distractions. These small optimizations significantly speed up work over time.

Tabs in Control Panel

We redesigned the tabs to make them even more minimalistic. Text labels were replaced with neat icons and tooltips. The interface became cleaner while remaining easy to navigate.

Resizable Control Panel

Previously, some plugins (such as Text) didn’t have enough space in the Control Panel, which led us to add a special expand button. In Gridbox 3, we completely abandoned this approach.

Now, the Control Panel of any plugin can be resized. Need more space to edit settings? Easy! Just stretch the panel to the size you need.

Better Option Organization

We systematically reorganized all options. In other words, we've made their layout as logical, neat, and visually balanced as possible.

Everything is structured and aligned. To be honest, our inner perfectionists are delighted with the result.

A New Sub-Panel for Extended Settings

The Sub-Panel was introduced to unify the design and reduce the number of inconsistent interface elements.

Many settings are now open as nested panels, keeping the main interface clean and focused.

Advanced Settings

Previously, options were divided into separate groups: Disable On, Presets, and Advanced. In Gridbox 3, these are unified into a single logical Advanced group.

Let’s take the Disable On option as an example. Now, when you click this option, a Sub-Panel appears where you can specify which devices you don't want the element to display on.

Presets

The presets panel in previous Gridbox versions was designed differently and followed an earlier interaction model. The preset logic remains the same, but selecting a preset is now done through an input that opens a sub-panel.

Preset management in Gridbox 3 has become more logical and intuitive. You’ll soon see it for yourself.

Animations

Previously, animation settings were displayed in a custom window with additional styles. In Gridbox 3, all animation settings have also been moved into a Sub-Panel.

Overall, as you can see, the new Sub-Panel has proven to be very effective. It allows us to reduce Editor code and align modals to a unified Gridbox 3 standard.

Inputs Improvements

As we’ve mentioned before, Gridbox 3 now uses browser-native dropdowns. Input fields, such as the Color Picker and Image Picker, were also updated. Let's take a closer look at these changes.

New Color Picker and Color Variables. The Color Picker in Gridbox 3 is now browser-native, which significantly reduced the amount of code. Color variables are displayed in a sub-panel as a convenient list, making it faster and easier to find the one you need.

Image Picker Updates. In Gridbox 3, we added a small but useful enhancement — image previews. This subtle detail helps you navigate content faster and more confidently.

Font Picker Improvements. We removed the font preview modal. Gridbox 3 is a tool for professionals, not a showcase of visual effects.

In real-world projects, only a limited number of font families are typically used. Font selection is a working task, not a showpiece. That’s why the Font Picker is now presented as a simple and clear dropdown in the native Gridbox 3 style.

Selecting and Editing Shape Dividers

The Shape Dividers panel was radically redesigned. Previously, it felt overloaded. In Gridbox 3, all Shape Dividers were moved into a Sub-Panel.

We removed previews. Selection is now done via a dropdown, and the visual result is immediately visible upon adding. The interface became more compact and cleaner.

The Sub-Panel supports multiple nesting levels. For example, when selecting a color variable for a Shape Divider opening a third panel level. Practical and intuitive.

Shadow Settings

Once again, we moved away from custom modals to maintain a unified design. Shadow settings are now also displayed in the Sub-Panel.

Hover Settings

We reorganized Hover Settings and aligned them with the overall Gridbox 3 style. To enable States, simply click the gear icon to open the Sub-Panel and configure the required options.

Managing state transitions in Gridbox 3 has become even easier.

We completely redesigned the plugin selection modal. We moved away from the dark design window so that the Gridbox interface no longer feels inconsistent. The new modal is discreet, spacious, displays more plugins, and looks more professional.​

The Joomla Modules and Balbooa Forms selection modals were also updated and aligned with the Gridbox 3 style — minimalism and only the necessary information.

The same applies to the Balbooa Gallery selection modal. The gallery and category are now selected through convenient browser dropdowns that do not waste your time on extra scrolling.

In this post, we showed how one of the most important parts of Gridbox has changed. The grid modernization, new element management, redesigned Control Panel, sub-panels, updated inputs, and unified modals don’t exist in isolation. They work as a unified ecosystem. 

We simplified and modernized the code, unified the interface, removed unnecessary modals and visual noise, and most importantly, rethought the interaction logic of the Editor itself. Working with the grid, settings, and states is now more direct, predictable, and faster.

Gridbox 3 focuses on the quality of the workflow. Fewer clicks, fewer distractions, more control and clarity at every stage of page creation. It’s an extension that doesn’t impose itself, but quietly supports your work.

Leave a comment