Grid row – not fullsize : how to

Grid row in combination with columns is a nice thing to have more layout options. But i don’t like it always to have the fullscreen mode for grid layout.

i would like to have this f.e.
click to enlarge

and frontend is:

so i gave to the grid alb element a class : grid-notfull

with this class i can wrap the whole grid with a container via functions.php of child-theme:
and to have the correct behavior of that surrounding container i do insert the css too:

function grid_layout_notfull(){
?>
<script>
(function($){
		$('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize"></div>');
		$('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
		$('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 20px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

1) the notfullsize class added to the surrounding container gets the same settings as avia-section and the class main_color to have the same background-color
2) and the grid-notfullsize gets the setting of “container”

you have to adjust the paddings and width to your enfold settings

see here a working example: https://webers-testseite.de/weber/aaaa/