ScrollableContainer with Grid Layout

[TheElevatedOne]

I am working on something and I am having trouble with this.

I need a Scrollable Container with two columns, scrolling on the y-axis.

I don't know of a way to achieve this (at least from the wiki and what I've tried)

Can somebody help?

[TomJGooding]

Could you provide a rough sketch or code example to help understand exactly what you're trying to achieve? There's probably a few ways to create the layout you've described, but it might help to understand your use-case.

[TheElevatedOne]

This is my workaround to what I am trying to achieve: (using the textual-image module)

def compose(self) -> ComposeResult:                                    
    yield ScrollableContainer(                                         
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        Horizontal(Image("orion-thumb.jpg"), Image("orion-thumb.jpg")),
        id="main",                                                     
    )                                                                  
    yield Footer()                                                     

---

I was trying to have a ScrollableContainer filled with, in this case, images based on files in a directory, showing two or three columns in a grid layout and having it scrollable on the y-axis.

Grid layout locks the elements to the window and I haven't found a way to forcibly allow overflow. So I got stuck.

It's my first time using ScrollableContainer as I only did static designs in my projects, so far.

[TomJGooding]

Maybe try something like this, ensuring the grid height is auto?

class ExampleApp(App):
    CSS = """
    #thumbnails-grid {
        height: auto;
        layout: grid;
        grid-size: 2;
    }
    """

    def compose(self) -> ComposeResult:
        with VerticalScroll(id="thumbnails-container"):
            with Grid(id="thumbnails-grid"):
                # yield Images...

[TheElevatedOne]

Thanks, that works.