Create a grid

Your grid type determines to what the grid images will link.  Some of the types dynamically connect content while others require that you specifically select content. Check out our grid types overview for a review of each grid type.

ProPhoto offers two grid styles: “Text below” shows an image with title and text appearing below the grid image, while” Overlaid text on rollover” shows only an image until visitors hover/touch the image, revealing title and text superimposed.

Both of these styles have global customization options in “ProPhoto > Customizer > Grids.”

Choose between a cropped grid, where all the images are cropped to exactly the same size, or a masonry grid, in which images of various sizes will appear (some people call this a “Pinterest-style” grid).  Remember: in order for your grid thumbnails to achieve a masonry look like you see below, your images need to have various aspect ratios.

A masonry grid: ProPhoto fits the images together like a puzzle, rows may not match perfectly

A cropped grid displays images in uniform columns and rows, creating clean lines and a neat look

Image crop ratio

You can set your own cropping ratio for images in cropped grid layout. You are not constrained to the default 3:2 (width:height) ratio. If you don’t want your grid image to be cropped in any way, make sure to use a ratio that matches what you use for a “featured image” (for a post or page grid), or Category grid image. Otherwise, a masonry grid layout may be more appropriate.

When thinking about the desired size of your grid thumbnails, it’s important to remember that their size and arrangement will change based on the browser window width.   See below for a simple example.

A grid will always flow in a responsive way to fill the max width set for it’s containing row (remember, row width can be set on a site, block and row level in your layout).

ProPhoto provides some grid spacing settings to give you some control over how that dynamic sizing and placement happens. The gutter is the space between each grid item.  Max columns is the maximum number of columns the grid will ever have, no matter how large the window gets.  The min and max width apply to individual grid items, allowing you to control how large or small the grid items will get. The item ideal width communicates to ProPhoto your preferred grid item size so as to maintain that specific size for as long as it makes sense. It’s a good idea to play around with these settings at different browser window sizes, so you know what the grid will look like under different scenarios.

Tip: If you want to maintain a certain number of columns across more widths, and don’t want them to wrap, set the minimum width to 50px (the minimum) and the ideal width to 51px. The max width can then be some larger number. Then you’ll get what see in the below grid. This video shows those settings and how it looks for a 3 column two row grid.