Implement fractions, and flexible flag

[tomalec]

As described at https://github.com/Juicy/juicy-tile-grid/wiki/How-to-create-responsive-design-with-Juicy-elements Output grid dimensions should use fractions (fr) as unit, and pixels (px) only if all cells in given column/row are fixed size.

Tile dimensions should be given in px only if tile is marked to be fixed size (not expandableWidth/-Height), and 100% otherwise (fit entire grid cell)

[tomalec]

I found a problem with our approach to flexible expandable layout, and fixed sizes.

We cannot set a column fixed size only if all cells in given track (row/col) are fixed size.

At least we cannot do so and keep gaps fixed size (so they don't resize when container resizes).

As you can see here, all those gaps created 5 cols in total, ad we need to keep them fixed size, to keep gaps fixed size, even though, each column contain elements that are not necessarily fixed size.

I see two solutions:

• 1. Set column to fixed size if if intersects at leas one fixed size item This may brake experience as there will be many fixed cols, what may brake relative proportions between elements.
• 2. Make gaps special cells, so they will force fixed size even if track intersects flexible items. This also may break experience as there are usually many gaps

In both cases it would be hard to identify whether the empty space in grid cell is gap, or just empty space.

We can also think about more sophisticated logic and make columns that intersects fixed items flexible, in specific cases (it intersects, only middle part, or beginning of an item with size less than.. etc.) but it may lead to way more problems, and will require longer discussion. As even if we could reduce problem to two rows, and apply algorithm that ma be then extrapolated recursively (if there exist one that makes sense), there are around 54 combinations to consider

The only idea to address the problem of many fixed size cells/gaps braking proportions I could say that:

1. Hopefully people would like to use flexible elements for RWD, and limit fixed-size elements,
2. We will make tight group sooner, and explain them to the users in an easy way, so they will use it - then gaps and fixed items from groups will not affect outer grid,
3. People will layout things according to Gestalt Principles so there will be less gap-related grid lines.

@Starcounter-Jack, @warpech WDYT? BTW, Can you recommend a good hardware for Mischief drawings? ;)

[tomalec]

Another reason to make track fixed if at least one intersecting item is fixed, is that W3C's Track Sizing Algorithm does take size of spanning cell into consideration. Unless I missed somthing.

Here is jsfiddle for this - if grid item gets bigger than flexible column (fr) - for example when grid container shrinks - column size does not change, as it would for non-spanning item and minmax(min-content,1fr)

[tomalec]

As agreed with @warpech on today's meeting,

• for now we will now go with

  Track is fixed if it contains fixed size item, or gutter

  :interrobang: How to identify track with gutter? Is "The track after grid line of item's end, and the track before grid line of item's beginning" enough?

• prepare reference use (test) cases for what we really expect from grid behavior - Polyjuice/Launcher#137,
• consider making bin-packing applicable only if explicitly asked, (for example, when there is no custom grid layout, and user clicks "arrange tiles automatically" button) - Polyjuice/Launcher#138,
• reconsider this issue, use of CSS Grid instead of position absolute, usage of groups, and tight groups, regarding specified cases.

[tomalec]

Description of algorithm that translates packed tiles into CSS Grid is available in https://github.com/Juicy/juicy-tile-grid/blob/fractions/algorithm.md

[tomalec]

I added a test suite for the results of this algorithm at /tests/?grep=grid_building_algorithm.html