✅ Enhanced Grid Control in Elementor 🌐

[ayoubkhan558]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

Elementor currently lacks the option to set grid-column, grid-row, and column/row span for grid child elements, limiting precise layout control. This feature aims to provide users with advanced grid customization options, addressing the current constraint.

Describe the solution you'd like.

Introduce a comprehensive set of controls within Elementor that enables users to define grid-column, grid-row, and specify column/row span for individual grid items. This enhancement will empower developers to create intricate layouts with greater precision, ensuring a more flexible and efficient design process. 🚀

Describe alternatives you've considered.

While manual CSS customization is currently an option, it can be complex and time-consuming. Another alternative is relying on external plugins, but native support within Elementor would streamline the workflow and maintain compatibility with the core system. 🔄

Additional context

This feature request is essential for developers seeking fine-grained control over grid layouts. By incorporating these options directly into Elementor, it would enhance the user experience and provide a more intuitive approach to building intricate designs without the need for external workarounds. 💡

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.

[m1ga]

A very quick way (less then 5mins) to do this layout with custom CSS is using https://cssgrid-generator.netlify.app/ and click your layout. Then use that CSS and assign it to the containers.

example for the top left one:

selector {
    grid-area: 1/1/2/3
}

Then you can do all the content inside the container.

But it would be nice to have grid-area as a custom field on the containers

[ayoubkhan558]

While it's possible to achieve this with custom CSS, not everyone has the skills or knowledge to do so. Therefore, having an option in Elementor to span rows and columns would be incredibly beneficial for users. This feature would greatly enhance design flexibility and accessibility for all.

[portalzine]

Build a quick grid tweaker for Elementor last year. Not perfect, but it works ;)
https://github.com/portalzine/cubicfusion-grid-tweaker

[zuzanu]

I tackled something similar with containers, but using fewer inputs. When working with complex grids, manually setting properties like grid-row-start, grid-row-end, grid-column-start, and grid-column-end can be very tedious. Adjusting these for mobile layouts makes the process even more challenging. To simplify, I relied on just two inputs by using shorthand properties like grid-row: span VALUE: The new inputs will be available in the additional options for each container element.

add_action('elementor/element/container/section_layout_additional_options/before_section_end', function ($element, $args) {

    $element->add_responsive_control(
        'grid_column_span',
        [
            'label' => esc_html__('Spaltenspanne', '4d-theme'),
            'type' => \Elementor\Controls_Manager::NUMBER,
            'min' => 1,
            'max' => 100,
            'step' => 1,
            'separator' => 'before',
            'selectors' => [
                '{{WRAPPER}}' => 'grid-column: span {{VALUE}};',
            ],
        ]
    );

    $element->add_responsive_control(
        'grid_row_span',
        [
            'label' => esc_html__('Zeilenspanne', '4d-theme'),
            'type' => \Elementor\Controls_Manager::NUMBER,
            'min' => 1,
            'max' => 100,
            'step' => 1,
            'selectors' => [
                '{{WRAPPER}}' => 'grid-row: span {{VALUE}};',
            ],
        ]
    );

}, 10, 2);

[hitsgee]

I would love to see a native solution for Bento grids in Elementor. I currently use a third party plugin to achieve but would love a native solution that requires one less plugin.

[ayoubkhan558]

@nicholaszein Please look into this.

[matthewQL]

This really should have been a priority even before releasing grid into the Elementor ecosystem. The entire power of grid comes in being able to designate columns, rows, and spans on any child element of a grid container. The Elementor Flexbox / Grid tutorial made me audibly sigh when I saw him nest containers, inside containers, inside containers, inside containers. That just isn't grid.

[toineenzo]

Should be around 1/2 weeks before this will be released in the upcoming 3.27 beta
Merged: #29495
You can actually already try it out by downloading the 'latest' zip file from GitHub

[ayoubkhan558]

This feature is released in Elementor v3.27 Beta

#29823

[nicholaszein]

*will be

[nicholaszein]

Hi everyone!

We have great news! 🙌

📢 We're happy to announce that this feature was released with Elementor v3.27.0! 🥳

You can now use new Column Span and Row Span controls on each child element of a Grid Container to define how many columns or rows they will extend inside your Grids.

✅ Feel free to check it out and update your plugin to the new version!

Check the changelog for more information:
Changelog of Elementor and Elementor Pro

Cheers 🥂