Here is a classic, the calculator app, from https://github.com/Textualize/textual/blob/main/examples/. I stripped out all of the logic, so it only renders the calculator

Before you layout the elements you must first create them in Python. The following code does just that:

```python
# We need to import stuff
from textual import events
from textual.app import App, ComposeResult
from textual.containers import Container
from textual.css.query import NoMatches
from textual.widgets import Button, Static

# Textual application class
class CalculatorApp(App):
    """A working calculator."""
    # Load the CSS which will have positioning
    CSS_PATH = "calculator.css"

    def compose(self) -> ComposeResult:
        """Add our buttons."""
        with Container(id="calculator"):
            yield Static(id="numbers")
            yield Button("÷", id="divide", variant="warning")
            yield Button("7", id="number-7")
            yield Button("8", id="number-8")
            yield Button("9", id="number-9")
            yield Button("×", id="multiply", variant="warning")
            yield Button("4", id="number-4")
            yield Button("5", id="number-5")
            yield Button("6", id="number-6")
            yield Button("-", id="minus", variant="warning")
            yield Button("1", id="number-1")
            yield Button("2", id="number-2")
            yield Button("3", id="number-3")
            yield Button("+", id="plus", variant="warning")
            yield Button("0", id="number-0")
            yield Button(".", id="point")
            yield Button("=", id="equals", variant="warning")

# Run the app
if __name__ == "__main__":
    CalculatorApp().run()
```

Here is the CSS, where we arrange all of the buttons like in an actual calculator. I've added comments before each attribute that affects position explaining how (and size, since that implicitly affects position)

```css
Screen {
    overflow: auto;
}

#calculator {
    // Arranges the buttons in a grid
    layout: grid;
    // The grid is 5 x 4...
    grid-size: 5 4;
    // ...with 1 empty cell between vertical items, and 2 empty cells between horizontal ones
    grid-gutter: 1 2;
    // All items have the same width
    grid-columns: 1fr;
    // The items in the first row are twice as tall as those in the remaining rows
    grid-rows: 2fr 1fr 1fr 1fr 1fr;
    // There is 1 empty cell above and below the calculator, and 2 empty cells to the left and right
    margin: 1 2;
    // The calculator must be at least 20 cells tall
    min-height: 20;
    // The calculator must be at least 24 cells wide
    min-width: 24;
    // The calculator will resize to the height of the terminal window (unless it's under min-height)
    height: 100%;
}

Button {
    // Each button will take up as much space as it can (boilerplate to avoid CSS defaults)
    width: 100%;
    height: 100%;
}

#numbers {
    // The number bar will span 4 columns. Since the calculator's "grid" is 4 x 4 this means it will take up the entire top of the calculator
    column-span: 4;
    // Text within the number bar will be horizontally aligned to the right, and vertically centered
    content-align: right middle;
    // There is a 1-cell horizontal gap between the number bar's border and its text. There is no vertical gap
    padding: 0 1;
    // The number bar will take up as much space as it can (boilerplate to avoid CSS defaults)
    height: 100%;
    background: $primary-lighten-2;
    color: $text;
}

#number-0 {
    // The "0" number will span 2 columns, so it will be wider than all the other numbers.
    column-span: 2;
}
```

And here is what the above actually renders to, for reference:

```
|----------------------|
|                      |
|  |----------------|  |
|  |                |  |
|  |              0 |  |
|  |                |  |
|  |----------------|  |
|                      |
|  |-|  |-|  |-|  |-|  |
|  |7|  |8|  |9|  |÷|  |
|  |-|  |-|  |-|  |-|  |
|                      |
|  |-|  |-|  |-|  |-|  |
|  |4|  |5|  |6|  |x|  |
|  |-|  |-|  |-|  |-|  |
|                      |
|  |-|  |-|  |-|  |-|  |
|  |1|  |2|  |3|  |-|  |
|  |-|  |-|  |-|  |-|  |
|                      |
|  |------|  |-|  |-|  |
|  |   0  |  |.|  |+|  |
|  |------|  |-|  |-|  |
|                      |
|----------------------|
```

Feel free to ask if you need any further clarification
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence