Skip to content

Customize Grid layouts

This guide describes how to customize the different Grid layouts available with with Exhibit theme.

Grid types

Exhibit's Grid-based sections feature the following types of grid:

Different grid layouts available

TypeDescription
StandardA simple grid layout with equally sized columns.
MasonryTiles are arranged in a staggered or brick-like pattern.
JustifiedTiles are arranged in rows with equal heights, while preserving their original aspect ratios.
ModularTiles are placed into divisions of a specified size.
IrregularTiles are placed in an asymmetrical layout.

Common grid settings

SettingDescription
Mobile columnsAdjust the number of columns displayed on mobile devices.
Number of columns on desktopAdjust the number of columns displayed on desktop devices. This setting does not apply if the Grid type is set to Modular or Irregular.

Standard grid type

Standard grid layout

The default, Standard grid layout features a simple column-based arrangement.

The Standard grid includes the following additional settings:

SettingDescription
Alignment of itemsSet the alignment of items inside the grid to Top, Baseline, Center or Bottom.

Masonry grid type

Masonry grid layout

The Masonry grid type displays tiles in rows. Items in alternate rows are raised up to fill gaps, like a "bricklaying" pattern.

TIP

Masonry grid layout is best used with images of varying aspect ratios.

Justified grid type

Justified grid layout

The Justified grid type arranges tiles in rows. Rows share the same height, and maintain their original aspect ratio. The tiles might have different widths, but are automatically resized to fit within the designated row height. The result is a harmonized and balanced presentation.

TIP

Justified grid layout is best used with images of varying aspect ratios.

Modular grid type

Modular grid layout

The Modular grid layout places tiles into predefined divisions consisting of square "modules". You can choose from 12 distinct modular layouts. Each module provides its own set of divisions, and you have the flexibility to select a layout that best suits your needs.

The Modular grid type includes the following additional settings:

SettingDescription
Layout variationSelect from 12 variations. Each variation offers a unique "module" layout.
Grid base aspect ratioThe default aspect ratio is set to 1:1 which means the modular grid is based on square modules. A lower aspect ratio results in more landscape-style tiles, and a higher aspect ratio results in more portrait-style tiles.

Irregular grid type

Irregular grid layout

The Irregular grid type displays tiles with varying widths, and results in an asymmetrical look and feel.

The Irregular grid type includes the following additional settings:

SettingDescription
Layout variationSelect from 15 variations. Each variation offers a unique layout.
Alignment of itemsSelect the alignment of items within the grid. The default alignment is set to Center. You can also choose from cardinal directions, including top, bottom, left, and right, to position items in the grid precisely.

Row and column spacing

Grid Theme setting related to row and column spacing

To ensure consistency and avoid redundant settings across sections, set gap sizes for Grid columns and rows using the following Theme settings.

SettingDescription
Column gapSet the gap between columns.
Row gapSet the gap between rows. Row gap does not apply to the Modular grid type.
Enable max grid widthEnable a maximum width for grids.
Max grid widthSet a maximum width for grids, in pixels.

TIP

For a grid without a "gutter" or no gaps, set the Row and Column gap to 0px.

Sections featuring grid layouts

Grid layouts are available across the theme in the following sections:

  • Blog posts gallery
  • Collage
  • Collection list
  • Featured collection
  • Featured products
  • Image gallery
  • Related products
  • Video grid

Grid layouts are also available in the following page templates:

  • Blog template
  • List collections
  • Collection