Banner grid

Settings

• Container type: This allows you to select full to create full-bleed layouts, padded to apply the global horizontal gap setting to a full bleed section, or max to constrain the blog posts to the maximum container size.

• Row height: Sets the minimum height for each row in the banner grid. The exact size of the banner is determined in each individual banner setting based on the number of rows and columns it occupies.

• Vertical/horizontal grid gap: Override your global grid to create tigher grids.

Blocks

This section comes preloaded with two different types of blocks:

• Section header (hidden by default, fill in the settings to display)

• Banner grid item: This block houses each image banner block. The following settings are available:

  • Desktop column and row: On desktop there are 4 columns. For each banner grid item, choose how many rows and columns you wish for the banner to occupy on desktop.

  • Mobile column and row: On mobile there are 2 columns. For each banner grid item, choose how many rows and columns you wish for the banner to occupy on mobile.

Examples & Inspiration

Banner grids have customizeable spacing and row settings to accomodate for a wide variety of images.