The "columns" parameter of Gallery becomes invalid when there are few images

[smallpillow]

Describe the bug

When a small number of images are displayed in the Gallery control, the images will be enlarged and the columns Settings will become invalid

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import random
import gradio as gr

def fake_gan(num):
    images = [
        (random.choice(
            [
                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-1151ce9f4b2043de0d2e3b7826127998.jpg",
                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-116b5e92936b766b7fdfc242649337f7.jpg",
                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-1163530ca19b5cebe1b002b8ec67b6fc.jpg",
                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-1116395d6e6a6581eef8b8038f4c8e55.jpg",
                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-11319be65db395d0e8e6855d18ddcef0.jpg",
            ]
        ), f"label {i}")
        for i in range(num)
    ]
    return images

with gr.Blocks() as demo:
    gallery = gr.Gallery(show_label=False, elem_id="gallery", columns=8, object_fit="contain")

    btn1 = gr.Button("Generate 5 images", scale=1)
    btn2= gr.Button("Generate 10 images", scale=1)

    btn1.click(fake_gan, [gr.State(value=5)], gallery)
    btn2.click(fake_gan, [gr.State(value=10)], gallery)

if __name__ == "__main__":
    demo.launch()

Screenshot

When there are five pictures

When there are ten pictures

I hope the size of the picture can be maintained

Logs

System Info

gradio==5.47.2

Severity

I can work around it

[dami0806]

Hello!
I'd like to take this issue.
Just to clarify — do you expect the gallery to keep a fixed image size
(e.g., each image should remain the same size even when there are fewer images than the number of columns)?

[smallpillow]

Yes, I think the size of the pictures should be maintained so that they are convenient to view when there are fewer images.

[smallpillow]

import random
import gradio as gr

def get_css():
    return '''

    .custom-gallery-width .grid-container {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 10px;
    }

    .custom-gallery-width .grid-item {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    '''

def fake_gan(num):
    images = [
        (random.choice(
            [
                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-1151ce9f4b2043de0d2e3b7826127998.jpg",
                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-116b5e92936b766b7fdfc242649337f7.jpg",
                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-1163530ca19b5cebe1b002b8ec67b6fc.jpg",
                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-1116395d6e6a6581eef8b8038f4c8e55.jpg",
                "http://www.marketingtool.online/en/face-generator/img/faces/avatar-11319be65db395d0e8e6855d18ddcef0.jpg",
            ]
        ), f"label {i}")
        for i in range(num)
    ]
    return images

with gr.Blocks(css=get_css()) as demo:
    gallery = gr.Gallery(show_label=False, elem_id="gallery", columns=8, object_fit="contain", elem_classes=['custom-gallery-width'])

    btn1 = gr.Button("Generate 5 images", scale=1)
    btn2= gr.Button("Generate 10 images", scale=1)

    btn1.click(fake_gan, [gr.State(value=5)], gallery)
    btn2.click(fake_gan, [gr.State(value=10)], gallery)

if __name__ == "__main__":
    demo.launch()

The effect can be achieved by rewriting css