How to use creative grid

Creative Grid support is built into Porto’s product/post listing elements. You will see a Creative Grid Layout selector inside the following elements:

• Porto Masonry Container
• Porto Products
• Porto Product Categories
• Porto Blog
• Porto Portfolios
• Porto Posts Grid

You can use Creative Grid in:

• Normal pages built with Elementor or WPBakery.
• Porto’s own builders (header, block, template builder, etc.)

1. Edit a page using your preferred builder (WPBakery, Elementor).
2. Insert a Porto element that supports Creative Grid (e.g., Porto Posts Grid, etc.).
3. Open the element’s settings.
4. Find the Creative Grid Layout option.
5. Choose one of the 11 presets.
6. Save and preview the layout.

You can extend Porto’s Creative Grid with your own layouts using two filters:

• porto_creative_grid_layout_images — registers the preview thumbnail
• porto_creative_grid_layouts — registers the layout definition

Default layouts are defined inside the function porto_creative_grid_layout() in porto-functionality/shortcodes/lib/functions.php file.

Place the following code in your child theme ( functions.php ):

Note: This example assumes your layout image is in /wp-content/themes/your-child-theme/assets/images/creative_grid/12.jpg

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', 'porto_child_custom_creative_grid_layouts', 10, 2 );
function porto_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;
}

Parameter reference

• width_md , height_md - Layout rules for smaller screens (below 768px)
• Fraction values
  • 1-2 → half width/height
  • 1-3 → one-third width/height
• size - Image size preset (e.g., large , blog-masonry-small , etc.)

• Use consistent image aspect ratios to reduce layout jumping.
• Higher-resolution images look better for large Creative Grid blocks.
• If using lazy load, ensure that placeholders match the final image aspect ratio.