masonry

# Components: Masonry Layout Guides masonry layout design for content with varying heights. Masonry stacks items in columns without distinct rows; items fill gaps like a brick wall. Best for image galleries, portfolios, and discovery-focused platforms. **When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output. ## When to Use Masonry | Use masonry when | Use grid when | |------------------|---------------| | **Varying heights** | Equal-height items | | Image-heavy; varied aspect ratios | Products, templates (consistent) | | Gallery, portfolio, showcase | Card grid | | Discovery, browsing; visual-first | Structured browsing | See **grid** for equal-height grid; **card** for card structure. ## Masonry vs Grid vs Bento vs Carousel | Layout | Structure | Best for | |--------|-----------|----------| | **Grid** | Equal rows and columns; uniform items | Products, templates, features | | **Masonry** | Columns; items stack without rows; gaps filled | Pinterest, Behance; varied content | | **Bento** | Intentional sections; predefined sizes | Homepage, dashboard; Apple-style | | **Carousel** | Slides; one/few visible; swipe/click | Testimonials, logos, featured items; see **carousel** | ## Masonry Structure | Element | Purpose | |---------|---------| | **Columns** | 2–4 columns; fluid or fixed | | **Items**...