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

[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.