How to create scrollable grid layout?

[theredfoxlee]

Hello! I want to create a grid of static widgets with a size of 20x20 (although the size may change). I would like the grid to be scrollable (to make it readable), but I am unsure how to achieve this.

What I have tried:

1. Using layout: grid; with grid-size: 20 20; and overflow: scroll scroll; does not work as all elements are displayed, even when they have min-width and min-height set. This makes the text unreadable.
2. When using a single ScrollableContainer that contains 20 Horizontal containers, each containing 20 Statics, the scroll bars do not appear. Even though only part of the grid is presented based on the element size, their height is not respected.

Do you have any ideas how to solve it?

---

Here is an image of what I would like to achieve (assuming that consecutive numbers become visible after scrolling to the right or down):

[davep]

As you've discovered, grid is for fitting things within the display, essentially. I think if I was going to do what you're asking here, I'd start out with this sort of framework:

from textual.app import App, ComposeResult
from textual.containers import VerticalScroll, Horizontal
from textual.widgets import Static

class ScrollableGridApp(App[None]):

    CSS = """
    .row {
        height: 5;
    }

    .row Static {
        border: solid cornflowerblue;
        width: 1fr;
        height: 1fr;
    }
    """

    def compose(self) -> ComposeResult:
        with VerticalScroll():
            for y in range(20):
                with Horizontal(classes="row"):
                    for x in range(20):
                        yield Static(f"{y} {x}")

if __name__ == "__main__":
    ScrollableGridApp().run()

giving:

[davep]

Was this what you were looking for @theredfoxlee?

[theredfoxlee]

@davep - it seems that what I was missing was adding the size to the horizontal container. What you did is exactly what I meant. Thank you for your help!

[davep]

Ahh! You wanted scrolling horizontal and vertical? Sorry if I misunderstood the question. Glad you got it sorted.