ACF InnerBlocks breaks css grid, How can we add classes to allowedblocks (Wordpress Gutenberg) - advanced-custom-fields

Question

When I create an ACF Innerblock with allowedblocks, childs blocks are wrapped inside a wp-block div that breaks my grid system.
For example a simple grid system like that :
<div class="grid-wrapper innerblock">
<div class="grid-item allowedblock col3 "></div>
<div class="grid-item allowedblock col3 "></div>
<div class="grid-item allowedblock col3 "></div>
<div class="grid-item allowedblock col3 "></div>
</div>
Will output this breaking code in the admin :
<div class="grid-wrapper block-editor-block-list__layout" data-is-drop-zone="true">
<div class="wp-block"> <!-- no class "col3" !! -->
<div class="grid-item allowedblock col3 "></div>
</div>
<div class="wp-block"> <!-- no class "col3" !! -->
<div class="grid-item allowedblock col3 "></div>
</div>
<div class="wp-block"> <!-- no class "col3" !! -->
<div class="grid-item allowedblock col3 "></div>
</div>
<div class="wp-block"> <!-- no class "col3" !! -->
<div class="grid-item allowedblock col3 "></div>
</div>
</div>
What's the solution to pass the class "col3" to the dynamics wp-blocks ?
I tried this, but it didn't work...
<div class="block-wrapper">
<?php
$template = array(
array( "acf/card", array( "className" => "col1-6 col2-8 col3-4" ) )
);
?>
<InnerBlocks
class=" grid-wrapper"
allowedBlocks="<?php echo esc_attr( wp_json_encode( array( 'acf/card') ) ); ?> "
template="<?php echo esc_attr( wp_json_encode( $template ) ); ?>"
/>
</div>

Answer 1

In InnerBlocks, I suspect class=" grid-wrapper" is breaking the layout as "class" is a reserved word in JavaScript. Unfortunately, InnerBlocks doesn't support "className" by default; even if you added className="grid-wrapper it would not be appended to class of <div>...</div>. Although, there is another way to create the wrapper <div> with the correct class using hooks with InnerBlocks.
General InnerBlocks with className example:
JavaScript
const blockProps = useBlockProps({
className: "grid-wrapper"
});
const { children, ...innerBlocksProps } = useInnerBlocksProps(blockProps,
{
template: [['acf/card', {className: 'col1-6 col2-8 col3-4'}]]
allowedBlocks: ['acf/card']
});
// Outter div will have: class="grid-wrapper"
<div {...innerBlocksProps}>
{children} // Inner divs(blocks) will have: class="col1-6 col2-8 col3-4"
</div>