Skip to main content

Dynamic UI

Masonry

Difficulty: Medium

You'll build a custom layout that arranges views in a masonry grid. Each view should be placed in the column with the least total height while maintaining its original aspect ratio. The width of each item fills the column width, ensuring a consistent structure across the grid.

See Demo

Requirements

Layout Behavior

  • The layout consists of N columns (default: 2). Each item fills the column width and maintains its original aspect ratio.
  • New items are placed in the column with the least accumulated height to create an evenly distributed layout.

Grid view

  • Each view in the grid represents a rectangle with a randomized aspect ratio and color from a fixed set. You can structure the input data as follows:
[
  { "id": 1, "color": "red", "aspect_ratio": 0.5 },
  { "id": 2, "color": "green", "aspect_ratio": 1.0 },
  { "id": 3, "color": "blue", "aspect_ratio": 1.5 },
  { "id": 4, "color": "yellow", "aspect_ratio": 2.0 },
  ...
]
  • Colors are randomly selected from red, green, blue, yellow. Aspect ratios are randomly chosen from 0.5, 1, 1.5, and 2.0.
💡
If you're feeling adventurous, try loading actual images instead of drawing rectangles. You can use free remote image APIs like Unsplash or Pixabay to fetch and display real images. Make sure each image fits neatly within a column while preserving its original aspect ratio.

Above & Beyond

  • Column Count Adjustment: Add a slider to dynamically change the number of columns (2–5) in real time.
  • Custom Spacing & Padding: Allow users to configure the spacing between rectangles for a more flexible layout.