Grid layout with specific width and height for some cells

[janemba]

Hello,

I'm playing a bit with textual examples and I designed a layout that is convenient for me but I don't how to set the width and the height for specific cell in the grid.

Here is the code:

from textual.app        import App, ComposeResult
from textual.widgets import Static

class GridLayoutExample(App):
    CSS_PATH = "style.tcss"

    def compose(self) -> ComposeResult:

        yield Static("One", classes="box", id="one")
        yield Static("Two", classes="box", id="two")
        yield Static("Three", classes="box", id="three")
        yield Static("Four", classes="box", id="four")
        yield Static("Five", classes="box", id="five")

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

Below the CSS:

Screen {
    layout: grid;
    grid-size: 2;
}

#one {
    column-span: 2;
}

#two {
    row-span: 2;
}

#three {
}

#four {
}

#five {
    column-span: 3;
}

.box {
    height: 100%;
    border: solid green;
}

The idea is to increase the width of the cell "two" and decrease the height of the cell "one" and "five".

I tried to play with grid-columns for the cell two width but without success. How can it be performed ?

[willmcgugan]

You set grid-columns or grid-rows on the container, i.e. the screen in this case. Does that help?

[janemba]

@willmcgugan
Unfortunately it doesn't help because it sets either for all columns or all rows.

The picture below is what I currently get. Lets say as an example I want the cell "Two" to be larger and the cell "Three" and "Four" with reduce width.

[willmcgugan]

I'm not clear what you are looking for. Suggest you sketch it.

[willmcgugan]

This?

[janemba]

I was doing the sketch but yes.

[willmcgugan]

Add these rules to your Screen

grid-rows: 3 1fr 1fr 8;
grid-columns: 1fr 14;

[janemba]

Perfect !