<juicy-tile-grid>
We use CSS3 Grid Layout. Unfortunately, it is not widely supported. In Chrome you can enable it through the "experimental Web Platform features" flag in
chrome://flags In IE we use it with -ms prefix, which implements pretty old spec, but works. For other browsers, you need to use polyfill.
Masonry-like Custom Element for sortable tiles that packs efficiently without changing HTML structure (changes CSS only), and adapts it to CSS Grid Layout.
0
2
heightDynamic: trueDynamically change height after tile was packed.
3
heightAdaptive: true - adapt to siblings dynamic height change
5
6
precalculateHeight: true - pre-calculate element size before packing.
7
8
9
10
11
Features
- masonry-like, gap-less layout (bin-packing),
- prioritizing items,
- grouping into virtual, nested containers,
- alignment in different orientations/directions,
- dynamically changing size,
- auto adjusting container sizes,
- gutter/cell-spacing between tiles,
- adapting to window size changes,
- CSS Grid Layout,
- adapting to dynamic changes of tile's content, without need to repack.