Grid Template Areas

[triniwiz]

If I wanted to handle something like the following

grid-template-areas:
"head"
"nav"
"main"
"foot"

Do I need to set the tracks or its handle by taffy if they are unset/empty

[nicoburns]

As long as you set the start/end positions of the areas, then Taffy should automatically generate the tracks.

[triniwiz]

Just want to confirm I'm sending the correct data, is it zero-based or 1+

  grid-template-areas:
        "header"
        "sidebar"
        "content"
        "sidebar2"
        "footer";

[
    GridTemplateArea {
        name: Atom('footer' type=inline),
        row_start: 5,
        row_end: 6,
        column_start: 1,
        column_end: 2,
    },
    GridTemplateArea {
        name: Atom('sidebar2' type=dynamic),
        row_start: 4,
        row_end: 5,
        column_start: 1,
        column_end: 2,
    },
    GridTemplateArea {
        name: Atom('header' type=inline),
        row_start: 1,
        row_end: 2,
        column_start: 1,
        column_end: 2,
    },
    GridTemplateArea {
        name: Atom('sidebar' type=inline),
        row_start: 2,
        row_end: 3,
        column_start: 1,
        column_end: 2,
    },
    GridTemplateArea {
        name: Atom('content' type=inline),
        row_start: 3,
        row_end: 4,
        column_start: 1,
        column_end: 2,
    },
]

Then I can use the names like ?

style.grid_row = Line{
                    start: GridPlacement::NamedLine("header-start", 0),
                    end: GridPlacement::NamedLine("header-end", 0)
                };
                
style.grid_column = Line{
                    start: GridPlacement::NamedLine("header-start", 0),
                    end: GridPlacement::NamedLine("header-end", 0)
                }
              

If you have the time I'd love to see a small sample of this usage 🙏🏽

[triniwiz]

Any demo/samples around the v0.9.0 support for named grid lines and grid areas will be helpful. 😄

[nicoburns]

It's 1-based. Same coordinate system as the corresponding CSS properties. Your code looks like it ought to work. I am very busy over the next couple of weeks. I can look into example code after that.

(btw the named line is also 1-based, but it uses 0 to represent "not specified", which is usually what you want)