Learn how to customize the number of columns in your Gallery database using CSS and adjust the container width for a cleaner, more spacious layout.

Customize Gallery Database Columns

You can customize the number of columns displayed in your Gallery database by adding custom CSS. This allows you to create a layout that better fits your content and design.

Small Gallery Cards

To display 3 columns for Small gallery cards:

.notion-collection-gallery.small {     grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

Medium Gallery Cards

To display 3 columns for Medium gallery cards, add the following CSS to your site's Code → CSS section:

.notion-collection-gallery.medium {     grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

Large Gallery Cards

To display 3 columns for Large gallery cards:

.notion-collection-gallery.large {     grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

Change the Number of Columns

To display a different number of columns, replace the value inside repeat() with your preferred number.

For example:

• repeat(2, minmax(0, 1fr)) → 2 columns
• repeat(3, minmax(0, 1fr)) → 3 columns
• repeat(4, minmax(0, 1fr)) → 4 columns

Adjust the Container Width (Recommended)

If your gallery cards appear too narrow or feel crowded after increasing the number of columns, you can expand the content area by adjusting your site's container width.

Navigate to:

Design → Layout → Container Width

Increasing the container width provides more horizontal space for your gallery, allowing each card to appear larger and reducing the crowded appearance.

Tip: The more columns you display, the wider your container should be. If you're using 3 or more columns, increasing the container width is recommended for the best visual result.