Layout problem

[mharig]

I want a 3x3 grid with a center widget that is wider than the neighbour widgets (no row-span!). All widgets are TextLog, except for the center widget, that consists of a top TextLog, and bottom Input, the latter with height 1.
I achieved all of the above, but to get the two widgets of the center 'cell' displayed, I have to set the heights of the parent, the TextLog and the Input explicitly to the appropriate heights. This is not portable to other screen sizes, so I definitely want an automatic layout.
I didn't provide code, because I do not want to push someone in the obvious not-quiet-right direction I took.

[davep]

Something like this?

from textual.app        import App, ComposeResult
from textual.containers import Horizontal, Vertical
from textual.widgets    import Header, Footer, TextLog, Input

class NotAGridLayout( App[ None ] ):

    CSS = """
    .left, .middle, .right {
        border: round #777;
    }

    .left, .right {
        width: 1fr;
    }

    .middle {
        width: 2fr;
    }

    TextLog {
        height: 1fr;
    }
    """

    def compose( self ) -> ComposeResult:
        yield Header()
        yield Vertical(
            Horizontal( TextLog( classes="left" ), TextLog( classes="middle" ), TextLog( classes="right" ) ),
            Horizontal(
                TextLog( classes="left" ),
                Vertical( TextLog(), Input( placeholder="Here's the Input" ), classes="middle" ),
                TextLog( classes="right" )
            ),
            Horizontal( TextLog( classes="left" ), TextLog( classes="middle" ), TextLog( classes="right" ) ),
        )
        yield Footer()

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

[davep]

The problem seems to be that you've sized .left and .right to be 1fr but left .middle as its default size. I suspect you want to change this:

.left, .right {
    width: 1fr;
}

to this:

.left, .middle, .right {
    width: 1fr;
}

[mharig]

The thing that does not work is: the Input field is not displayed.

[davep]

In that case you've got a couple of things going on in your code above. So first, the problem I highlighted:

Notice how the left and right panes on the top and bottom aren't really showing? The fix I mention above fixes that:

As for your input: you've not told the #shellog to share space with the input in the container, so I'd also add height: 1fr; to the styles for #shelllog. That results in this:

[mharig]

Fits perfectly!
I still do not understand why it is necessary to tell shellog explixitly to share space. Shouldn't that be an issue of the parent container, i.e. Vertical?

[davep]

Not really, no. I guess the way to think of it is like this (it's not a perfect analogy, but it roughly works). If you were packing physical things in a box, the box you're putting stuff in doesn't control the size, you pick the right things to fit inside it. So... the container holds your widgets and controls where they end up, but to do that they have to say "I'm this big!".