Skip to main content

How To Center Align your Gallery

Learn how to center your Notion gallery using simple methods like custom CSS, card size adjustment, container width settings, and disabling full width for a cleaner, balanced layout.

Written by Charlene
Updated today

There are a few effective ways to center and improve the alignment of your gallery, depending on your setup and plan.

1. Using Custom CSS (Paid Plan Only)

If youโ€™re on a paid plan, the most flexible way to center your gallery is by adding custom CSS.

You can inject your code via Code โ†’ CSS, which allows you to fully control the layout and alignment of your gallery. This method is ideal if you want precise positioning or consistent styling across your site.

@media (min-width: 900px) {
.notion-collection-gallery.small {
display: grid !important;
grid-template-columns: repeat(auto-fit, 300px) !important;
justify-content: center !important;
gap: 16px !important;
width: 100% !important;
max-width: 100% !important;
}

.notion-collection-gallery.small .notion-collection-card {
width: 300px !important;
max-width: 300px !important;
margin: 0 !important;
}

.notion-collection-gallery.small .notion-collection-card__cover {
height: 190px !important;
}
}

Here's a Short Video Clip For reference:

2. Adjusting Card Size (Free Plan Friendly)

For free plan users, especially those using Full Width in their Notion page, you can improve the alignment by modifying the gallery layout.

Simply change the Card Size to Large.


This reduces excess spacing and makes the gallery appear more centered and balanced within the page.

3. Disable Full Width

Another simple option is to turn off the Full Width setting in your Notion page.

By doing this, your content, including the gallery will be constrained within a centered container, which naturally improves alignment without needing any custom code.

4. Adjust Container Width (Design Settings)

You can also center your gallery by modifying the container width in your site settings.

Go to Design โ†’ Layout โ†’ Container Width and reduce the width.
This constrains the content area, helping your gallery appear more centered on the page without needing custom code.

Summary

  • Best control: Use custom CSS (paid users)

  • Quick fix (free users): Set card size to Large

  • Simple layout adjustment: Disable full width

Did this answer your question?