GridLayout

+----------+----------+----------+
| Header                         |
+----------+----------+----------+
| Menu     | Content             |
+----------+----------+----------+
| Footer                         |
+----------+----------+----------+

grid({ /* it == GridStyleParams (sum type of different StyleParams based interfaces including this one) */
        columns { repeat(3) { "1fr" } }
        autoRows { minmax(100) { auto } }
        areas {
            row("HEADER", "HEADER", "HEADER")
            row("MENU", "CONTENT", "CONTENT")
            row("FOOTER", "FOOTER", "FOOTER")
        }
        gap { normal }
    }) {
        // child content of the grid container, different _context_, but relation to the _area names_!
        box({
            grid { area { "HEADER" } }
        }) {
            text { +"Header" }
        }
        box({
            grid { area { "MENU" } }
        }) {
            text { +"Menu" }
        }
        box({
            grid { area { "CONTENT" } }
        }) {
            text { +"Content" }
        }
        box({
            grid { area { "FOOTER" } }
        }) {
            text { +"Footer" }
        }
    }