table layout

sandbox/will/calculator.css

@@ -0,0 +1,28 @@
+#calculator {
+    layout: table;
+    table-columns: 1fr 1fr 1fr 1fr;
+    table-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
+    table-gutter: 1 2;
+    margin: 1;
+    min-height:23;
+}
+
+.display {
+    column-span: 4;
+    content-align: center middle;
+    height: 100%;
+    background: $panel-darken-2;
+}
+
+Button {
+    width: 100%;
+    height: 100%;    
+}
+
+.special {
+    tint: $text-panel 20%;
+}
+
+.zero {
+    column-span: 2;
+}

sandbox/will/calculator.py

@@ -0,0 +1,37 @@
+from textual.app import App
+
+from textual.layout import Container
+from textual.widgets import Button, Static
+
+
+class CalculatorApp(App):
+    def compose(self):
+        yield Container(
+            Static("0", classes="display"),
+            Button("AC", classes="special"),
+            Button("+/-", classes="special"),
+            Button("%", classes="special"),
+            Button("÷", variant="warning"),
+            Button("7"),
+            Button("8"),
+            Button("9"),
+            Button("×", variant="warning"),
+            Button("4"),
+            Button("5"),
+            Button("6"),
+            Button("-", variant="warning"),
+            Button("1"),
+            Button("2"),
+            Button("3"),
+            Button("+", variant="warning"),
+            Button("0", classes="operator zero"),
+            Button("."),
+            Button("=", variant="warning"),
+            id="calculator",
+        )
+        self.dark = True
+
+
+app = CalculatorApp(css_path="calculator.css")
+if __name__ == "__main__":
+    app.run()

sandbox/will/table_layout.css

@@ -0,0 +1,23 @@
+Screen {
+    layout: table;
+    table-columns: 2fr 1fr 1fr;
+    table-rows: 1fr 1fr;
+    table-gutter: 1 2;
+}
+
+Static {
+border: solid white;
+background: blue 20%;
+height: 100%;
+width: 100%;
+}
+
+#foo {
+    row-span: 2;    
+}
+
+#last {
+    column-span: 3;
+    margin: 1;
+    
+}

sandbox/will/table_layout.py

@@ -0,0 +1,19 @@
+from textual.app import App
+
+from textual.widgets import Static
+
+
+class TableLayoutApp(App):
+    def compose(self):
+        yield Static("foo", id="foo")
+        yield Static("bar")
+        yield Static("baz")
+
+        yield Static("foo")
+        yield Static("bar")
+        yield Static("baz", id="last")
+
+
+app = TableLayoutApp(css_path="table_layout.css")
+if __name__ == "__main__":
+    app.run()