Gallery `columns` and `rows` are not responsive to CSS breakpoints

[dvruette]

Describe the bug

When a list of more than 1 value is passed to gr.Gallery, the documentation states that the different values are active at different breakpoints (https://www.gradio.app/docs/gradio/gallery#initialization):

columns: int | list[int] | Tuple[int, ...] | None Represents the number of images that should be shown in one row, for each of the six standard screen sizes (<576px, <768px, <992px, <1200px, <1400px, >1400px). If fewer than 6 are given then the last will be used for all subsequent breakpoints

This is however not how it's actually implemented, as the variable gets passed to Svelte unmodified. For example, the following Python code results in the subsequent generated HTML:

gr.Gallery(columns=[1, 2, 3, 4], rows=[1, 1, 1, 1])

<div class="grid-container svelte-1glfvaj pt-6" style="--grid-cols: 1,2,3,4;--grid-rows: 1,1,1,1;--object-fit: cover;height: auto;">
  ...
</div>

Considering that this feature used to work ~1 year ago, I think it's safe to say that this is a bug rather than a documentation error.

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

import gradio as gr

with gr.Blocks() as app:
  gr.Gallery(columns=[1, 2, 3, 4], rows=[1, 1, 1, 1])

app.launch(debug=True)

Screenshot

No response

Logs

No response

System Info

------------------------------
Operating System: Darwin
gradio version: 4.41.0
gradio_client version: 1.3.0

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 4.2.0
fastapi: 0.109.0
ffmpy: 0.3.1
gradio-client==1.3.0 is not installed.
httpx: 0.26.0
huggingface-hub: 0.20.3
importlib-resources: 6.1.1
jinja2: 3.1.3
markupsafe: 2.1.4
matplotlib: 3.8.2
numpy: 1.26.3
orjson: 3.9.12
packaging: 23.2
pandas: 2.2.0
pillow: 10.2.0
pydantic: 2.5.3
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.6.0
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.9.0
urllib3: 2.1.0
uvicorn: 0.27.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2023.12.2
httpx: 0.26.0
huggingface-hub: 0.20.3
packaging: 23.2
typing-extensions: 4.9.0
websockets: 11.0.3

Severity

Blocking usage of gradio