Problem with element positioning in a multi-column layout

You can add this to pluginOpts inside grapesjs.init:

const editor = grapesjs.init({
  // ...
  pluginsOpts: {
    "gjs-blocks-basic": {
       stylePrefix: '', // no gjs- prefix
       flexGrid: 1 // use flexbox instead of tables
     }
  },
  // ...
});

This will probably also fix your previous alignment issues and is much better for responsive design

@theSC0RP This is not really a problem with GrapesJS itself. The cell in GrapesJS has

display:table-cell;

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

vertical-align:middle;

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 easily change it. There might be other ways to align item in a table layout. Alternatively, you can also create your own custom layout component, which can behave as you would like it.

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