How to use creative grid

Porto provides 11 pre-defined creative grid layouts by default.
We can add custom layouts using “porto_creative_grid_layout_images” and “porto_creative_grid_layouts” filters.
All default layouts are defined in porto_creative_grid_layout function in shortcodes/lib/functions.php of porto-functionality plugin.

Below code shows how to add 12th custom layout like following image using functions.php in child theme.
*Note: We suppose that new grid layout image is located in child themes’s assets/images/creative_grid/ directory.

add_filter( 'porto_creative_grid_layout_images', 'porto_child_custom_creative_grid_layout_names' );
function porto_child_custom_creative_grid_layout_names( $layouts ) {
$layouts = array_merge(
$layouts,
array(
get_theme_file_uri( 'assets/images/creative_grid/12.jpg' ) => '12',
)
);
return $layouts;
}
add_filter( 'porto_creative_grid_layouts', 'porot_child_custom_creative_grid_layouts', 10, 2 );
function porot_child_custom_creative_grid_layouts( $default, $layout_id ) {
if ( '12' == $layout_id ) {
return array(
array( 'height' => '1', 'height_md' => '1', 'width' => '1-3', 'width_md' => '1', 'size' => 'large' ),
array( 'height' => '1-2', 'height_md' => '1-2', 'width' => '1-3', 'width_md' => '1', 'size' => 'blog-masonry-small' ),
array( 'height' => '1-2', 'height_md' => '1-2', 'width' => '1-3', 'width_md' => '1', 'size' => 'blog-masonry-small' ),
array( 'height' => '1', 'height_md' => '1', 'width' => '1-3', 'width_md' => '1', 'size' => 'large' ),
);
}
return $default;
}