Masonry-like Custom Element for sortable tiles that packs efficiently without changing HTML structure (changes CSS only), and adapts it to CSS Grid Layout. Extended renderer for juicy-tile-list.
I have implemented heightDynamic and widthDynamic (and ..Adaptive as well).
The way it works is described more-or-less on wiki
I wonder if it is the way we want. Let's take a look at example -
If tile 2 grows, 1 adapts, but 3 could adapt as well.
CSS Grid Layout gives us a way to do so just set fifth row (the one containing tile 3) to be "adaptive" in the same way we did with third row (the one with tile 2): minmax( _rowHeight_, max-content ). It looks quite nice, as additional height is distributed natively between 1 and 3.
The thing is that from CSS Grid point of view our gap is a cell as any other. Some may say "oh, this is just a gap-line, then it should be always fixed", but it is not always gap-line, as you can see here.
Maybe iterate once again over all tiles intersecting with a line (row/column) to say "line that does not have any 'adaptive' tile should have fixed size". But hey! if there is no adaptive tile, we still would like our dynamic tile to be able to grow, therefore we need at least one adaptive line. Should first one be always adaptive? or may be last one?
I would really like to make this algorithm simple. Not only because of performance, complexity, or code maintenance, but also because we would need to explain it to the end user. And it should be at least somehow intuitive to catch.
@Starcounter-Jack , @warpech do you have any comments?
I have implemented
heightDynamic
andwidthDynamic
(and..Adaptive
as well). The way it works is described more-or-less on wikiI wonder if it is the way we want. Let's take a look at example - If tile 2 grows, 1 adapts, but 3 could adapt as well.
CSS Grid Layout gives us a way to do so just set fifth row (the one containing tile 3) to be "adaptive" in the same way we did with third row (the one with tile 2):
minmax( _rowHeight_, max-content )
. It looks quite nice, as additional height is distributed natively between 1 and 3.The thing is that from CSS Grid point of view our gap is a cell as any other. Some may say "oh, this is just a gap-line, then it should be always fixed", but it is not always gap-line, as you can see here. Maybe iterate once again over all tiles intersecting with a line (row/column) to say "line that does not have any 'adaptive' tile should have fixed size". But hey! if there is no adaptive tile, we still would like our dynamic tile to be able to grow, therefore we need at least one adaptive line. Should first one be always adaptive? or may be last one?
I would really like to make this algorithm simple. Not only because of performance, complexity, or code maintenance, but also because we would need to explain it to the end user. And it should be at least somehow intuitive to catch.
@Starcounter-Jack , @warpech do you have any comments?