Problem with element positioning in a multi-column layout

Question

How to control the position of the elements in the cells in columns? On the left side, I have the map element, and on the right, I have a Text and Image. As seen in the screenshot below, the elements on the right are positioned after the map. A similar problem is there in this codepen (Grapesjs Custom UI by @artf ) too.

Ju99ernaut · Accepted Answer

You can add this to pluginOpts inside grapesjs.init: This will probably also fix your previous alignment issues and is much better for responsive design

MartinPutz · Answer

@theSC0RP This is not really a problem with GrapesJS itself. The cell in GrapesJS has property, so it tries to simulate a table layout, as far as I'm aware. So if you want to change the positioning, then find a way to vertically change position in a table. One solution might be See https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align So you would either automatically apply this on your custom component or you could create a custom style property for this setting, so that you could ea...

theSC0RP · Answer

@MartinPutz Thank you for the answer. How would I create and apply a custom style property on the cell? I am using the grapesjs-blocks-basic plugin so the cell has a class name of 'gjs-cell'. I tried to add the suggested property on this class in my styles file but the problem is still there.

Problem with element positioning in a multi-column layout

Question

Answers (3)

Related Questions and Answers

MultiSelect some elements and change styles only work on the last selected element

Ckeditor wrap and block the text below

Moved element snaps to wrong position on resize

Unable to drag an element if style has bottom or right values

Paid Plugins That Match This Issue

Related tutorials

GJS.Market Is Now Available for India 🇮🇳

How to Build an AI-Powered Page Builder with GrapesJS in 2026

How Much Does It Cost to Build a SaaS Page Builder in 2026?

Browse Plugin Categories