EasyLayout

Demo | Documentation

Layout Types

• Compact: compactly places the elements.
• Grid: places elements in the grid, cell size is not fixed and depends on element sizes in the same row and column. 
• Flex: places elements like CSS flexbox layout.
• Staggered: places elements one by one in the shortest column or row depending on the main axis.
• Ellipse: places elements one-by-one on the border of the ellipse or the circle starting from a specified angle and with a specified angle distance between elements.
• Hex: places elements in the hexagonal grid, elements' coordinates can automatically calculated or specified by separate components, support both flat-top and pointy-top hexagons, and have optional constraints by elements per row or column.

Each layout type, except the Ellipse, has an optional constraint by row or column count.

You have options to control the order of the elements: main axis (horizontal or vertical); left to right, right to left; top to bottom, and bottom to top.

And options to animate elements' movement to other positions and size changes.