On this page i use the grid row element to mimic a page which has content and sidebar.
OH – nice to have the sidebar in the middle? or on the right side or left side on one page.
The grid row is a fine thing – because you are able to nest column elements.

To have the same outlook on grid-row like on a 1/1 container i decided to have a grid-row not full-width.
You can set that via css only – but the problem then would be what color the left and right part of a non-fullwidth grid row has!

So a little jQuery to have a surrounding container on the element with the settings of a color-section: full-width, main-color background etc. – see below

The grid-row in that element will get the settings of the color-section container: max-width, margins and paddings.

// this is the class that goes to grid-row element :  grid-notfull

function grid_layout_notfull(){
$responsive_size = avia_get_option('responsive_size');
?>
<script>
(function($){
  $('.av-layout-grid-container.grid-notfull' ).each(function() {
    var notfullID = $(this).attr('id');
    $(this).hasClass('main_color') ? $(this).wrap('<div class="main_color notfullsize '+notfullID+'"></div>') : '';
    $(this).hasClass('alternate_color') ? $(this).wrap( '<div class="alternate_color notfullsize '+notfullID+'"></div>') : '';
  });
  $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
  $('.grid-notfull').css({"max-width": "<?php echo $responsive_size; ?>" , "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

First Grid-row layout.

Second Grid-row layout.