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.

Click on the button to load the Prism Script to better visualise Code-Block elements.

Load content

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

function grid_layout_notfull(){
    $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize color1"></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 50px"});
add_action('wp_footer', 'grid_layout_notfull');

// the value of 1310px is that standard width of max-width container. if you got different settings - you had to adjust this.

First Grid-row layout.

Second Grid-row layout.