How to use layout: grid with height: auto? (if possible)

[mitosch]

I have a difficulty creating a layout: grid; with a flexible height. What I try to do is the following:

A container between other elements which is using the needed height of it's childs. Here is an example of the expected result:

I thought by adding height: auto; to the container with layout: grid; the height would be calculated by it's childs (or in other words: behave like display: grid; in CSS with grid-auto-rows: min-content; CSS reference ).

The actual result is, that the container disappears:

Is there a possibility to get the expected result with layout: grid;?

Attached is an example code: It uses the defaults (layout: grid; expands to the available height). Pressing a sets the property height: auto; and it disappears.

Thank you for any help or alternatives to get the result.

from __future__ import annotations

from textual.app import App, ComposeResult
from textual.containers import Container, Vertical, Horizontal
from textual.widgets import Header, Footer, Static
from textual import log


class LayoutTestApp(App):
    BINDINGS = [
        ("a", "toggle_auto", "Set Grid: height=auto")
    ]
    DEFAULT_CSS = """
    .title {
        text-style: bold;
    }

    #grid_layout {
        layout: grid;
        grid-size: 3 3;
        grid-gutter: 1;
        background: $panel;
        /* added by key "a" */
        /* height: auto; */
    }

    #grid_layout Static {
        background: $boost;
    }
    """

    def compose(self) -> ComposeResult:
        yield Header()
        yield Footer()

        yield Container(
            Vertical(
                Static("A Title", classes="title"),
                Horizontal(
                    Static("Box"),
                    Static("Box"),
                    Static("Box"),

                    Static("Box"),
                    Static("A Box with a longer text which breaks and has 2-3 lines of text."),
                    Static("Box"),

                    Static("Box"),
                    Static("Box"),
                    Static("Box"),
                    id="grid_layout"
                ),
                Static("A Text after the grid"),
            )
        )

    def action_toggle_auto(self) -> None:
        log("toggle auto")
        log("value before:")
        log(self.query_one("#grid_layout").styles.height)
        self.query_one("#grid_layout").styles.height = "auto"
        log("value after:")
        log(self.query_one("#grid_layout").styles.height)


if __name__ == "__main__":
    app = LayoutTestApp()
    app.run()

[davep]

It's worth noting, just because you mentioned it, but the docs do highlight that you shouldn't have web browser grid in mind when looking at Textual's grid.

That aside, checking here I'm told that a grid container should handle height: auto so this is looking like a bug. I'll raise an issue to that effect.

[davep]

Raised as #1597.

[mitosch]

Thank you for raising the bug and clearify.

you shouldn't have web browser grid in mind when looking at Textual's grid

Absolutely, just referenced to CSS spec because it's easy to describe the expected result. (I always change my HTML/CSS-hat with my Textual-hat when developing Textual console apps ;-) )