Good day. I currently have this gallery of photos with max of 4 items per row. I would like to know if in case the number of items is less than 4 in the next row, would it be possible to align center the remaining items so it would look like this:

Currently it looks like this:

Thank you for your help.

Disclaimer: All the photos in this sample project are from sample data in outsystems.

Hi Jerome,

The Gallery component create the number of columns as your choice, even if it's empty.

See:

So I guess that's no possible.

Regards,

Leandro.

Hi Jerome, 

I dont think it is possible. @Leandro  is right because it fixed column content.

else you will need to create custom div and set item in this

Regards

Rahul Sahu

Solution

Hi Everyone. I was able to make use of this style to achieve this look. Please refer to the CSS below and hope this may help someone looking for the same effect in the future. Thank you.

.custom-alignment {
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 flex-wrap: wrap !important;
 width: 100% !important;
 max-width: 600px;
}
Solution

Nice Jerome!

Nice job  Jerome :-)