Changing the number of columns displayed in a gallery or collection

Collection items like photos, products, services, team members, and resources can be displayed in a grid with a set number of columns.


jay_d2-1572877644-modified
Written by: Jay Douglas
Last Updated: 11 Mar. 2025
   


Many section layouts that display a collection of items can be adjusted to show more or less items on each row. Follow these instructions to change the number of columns in your photo gallery or other collection.

1. Click the purple Edit button from the section you want to modify. Then click Edit Section.

This can be any group of items, such as a Photo or Video Gallery, Services or Products overview, or Team members section.


Screenshot 2025-03-11 at 12-33-19 PM-png

2. In the left pane, click Grid & dimensions.

3. Click the Columns dropdown and choose the desired number of columns for your collection.


4. Your collection grid will adjust to display your items in the desired number of columns. In the example below you will see the section go from 3 columns to 4 columns. 

Note: Most layouts automatically display collections in a single column on mobile devices for the best browsing experience.



Tips:

  • Choose Flex to display all items in one row on larger screens
  • To adjust the position of items in rows with fewer items than the number of columns (for example 2 photos on a row in a 3-column gallery), click Alignment, then choose a Component grid alignment setting.


Need help?
Contact our support team at hello@b12.io.