How to set column widths on a grid?

[avsaase]

I'm making a grid widget for Iced using Taffy. In my API I let users supply a vector of columns widths and I'm now trying to figure out how to pass these to Taffy. I see there's a grid_auto_columns field in Style which seems to be what I need but I'm a bit lost in all the type aliases. Could you give a minimal example of how to set the columns widths to point me in the right direction? Thanks 🙌🏻

[nicoburns]

Firstly, you probably want grid_template_columns rather than grid_auto_columns. grid_auto_columns is for determining the size of columns that are not declared up front as part of the "explicit grid" but created implicitly when a child is placed in row/column that is outside of the bounds of that grid. The easiest way to set each column's size is using the helper functions in the style_helpers module (https://docs.rs/taffy/latest/taffy/style_helpers/index.html). An example would be:

taffy.set_style(node, Style {
    grid_template_columns: vec![auto(), length(10.0), percent(10.0), fr()],
    ..
});

The different types of column size are:

• length(f32) - a fixed pixel column size
• percent(f32) - a percentage of the parent node's width
• fr(f32) - floor size at the size of the content, and then take up a portion of the
• flex(f32) - short for minmax(length(0), fr(f32))- same as fr but floored at zero rather than the content size <-- this one is very similar to Iced'sFillPortion`.
• auto() - automatic column size (generally based on the content of the column)
• min_content() - the min content size (e.g. size with all soft wrapping opportunities taken)
• min_content() - the min content size (e.g. size with all soft wrapping opportunities taken)
• minmax(a, b) where aandb` are one of the other options above.

See also the runnable example in the example directory of the repo: https://github.com/DioxusLabs/taffy/blob/main/examples/grid_holy_grail.rs

Note that caching is super important for performance when using Taffy (because without it time complexity is exponential with respect to the depth of the tree - in the worst case: if you don't use any of the content based column sizes you might be able to avoid this), so you'll likely want to make sure that you are caching results. I did submit a PR to Iced to help with performance (iced-rs/iced#1722) on the back of which I was planning to make a first-party integration with Iced (see https://github.com/nicoburns/iced_taffy). But unfortunately that PR was rejected.

[avsaase]

Thanks so much for the detailed answer.

One follow-up question, what happens if the number of column widths is smaller or larger than the number of columns in the grid?

[nicoburns]

The grid will have at least as many columns as the length of the grid_template_columns property (although if they are content sized and have no content then they may end up being zero-width). If no content is placed in those columns then they will simply be empty. If content is placed outside of the bounds of the columns specified by grid_template_columns then extra "implicit" columns will be created, and these columns will be sized according to grid_auto_columns (or will all have "auto" size if grid_auto_columns is not specified.

Rows work exactly the same.

Note also that items (children) don't have to be given an explicit position. If they are given "auto" positions then the placement algorithm will place them according to the grid_auto_flow property (by default left-to-right, then top-to-bottom, creating extra rows as needed).

Btw, all of this is just standard CSS Grid. So any resources on the web that explain how CSS Grid works also ought to apply to Taffy's Grid implementation. For example, https://css-tricks.com/snippets/css/complete-guide-grid/