<@U0BDMQTHS> The CSS Grid is much more expressive ...

# tornadofx

[carlw]

@mikehearn The CSS Grid is much more expressive than GridPane. For example,

grid-template-columns: 300px 1fr 3fr 20%;

defines a grid where the first column is fixed at 300px, the last column takes up 20% of the width, and the remaining space is divided between the middle 2 columns. The 3rd column gets 3x as much space as the second.

grid-template-areas: "header header header"
"main main sidebar"
"footer footer footer";

Defines a typical header/footer/sidebar structure in a 3x3 grid automatically. You’ll use a grid-area definition to define “header” like this

.item-1 {
background: #b03532;
grid-area: header;
}