# Masonry

The Masonry component arranges its child components in a dynamic, grid-like layout where items are organized into columns of equal width. It is part of the Collections group and is ideal for displaying cards or items with variable height, much like a Pinterest-style layout. Use this component when you need a responsive, masonry-style grid that automatically lays out items in multiple columns with a configurable gutter.

Instantiate the Masonry component using the static helper methods provided by the Tesserae.UI class. Specify the number of columns and optional gutter space (in pixels) between items. The component automatically wraps each child in a container with styling adjustments.

Below is a minimal example demonstrating how to create a Masonry layout with several card components:

using System;
using System.Linq;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

public class MasonryExample : IComponent
{
    public HTMLElement Render()
    {
        // Create the Masonry layout with 4 columns and a gutter of 10px (default)
        var masonry = Masonry(4).S();

        // Add multiple card components to the Masonry layout
        for (int i = 0; i < 10; i++)
        {
            // Creating a simple card with variable height
            var card = Card(
                VStack().AlignItemsCenter().JustifyContent(ItemJustify.Center)
                      .Children(TextBlock($"Card {i}").NoWrap()))
                      .H(100 + (i % 3) * 50);
            masonry.Add(card);
        }

        return masonry.Render();
    }
}

• Add(IComponent component)
  Adds a new component to the masonry layout.
  • Parameter: component (IComponent) - The UI component to add.

• Clear()
  Clears all child components from the masonry layout and re-renders the layout.

• Replace(IComponent newComponent, IComponent oldComponent)
  Replaces an existing child component with a new component.
  • Parameters:

  • newComponent (IComponent): The new component to insert.
  • oldComponent (IComponent): The old component to be replaced.

• Remove(IComponent component)
  Removes a component from the masonry layout.
  • Parameter: component (IComponent) - The component to remove.

• Render()
  Renders and returns the HTML element associated with the Masonry layout.

• Background
  Get or set the background style of the Masonry container.
  • Type: string

• Margin
  Get or set the margin style of the Masonry container.
  • Type: string

• Padding
  Get or set the padding style of the Masonry container.
  • Type: string

• StylingContainer
  Returns the internal HTMLElement used for applying specialized styling.
  • Type: HTMLElement

• PropagateToStackItemParent
  Indicates whether the styling should propagate to the parent Stack item.
  • Type: bool
  • Default Value: false

In this sample, a Masonry layout is created with 4 columns. Cards with varying heights are dynamically generated and added to the layout.

using System;
using System.Collections.Generic;
using System.Linq;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

public class MasonryLayoutSample : IComponent
{
    public HTMLElement Render()
    {
        // Create a Masonry instance with 4 columns
        var masonry = Masonry(4).S();

        // Generate and add 100 cards with random heights
        var random = new Random();
        for (int i = 0; i < 100; i++)
        {
            // Each card is created with a base height plus a multiple of 50px
            var height = 100 + (int)(random.NextDouble() * 6) * 50;
            var card = Card(
                VStack()
                    .AlignItemsCenter()
                    .JustifyContent(ItemJustify.Center)
                    .Children(TextBlock($"Card {i}").NoWrap()))
                .H(height);

            masonry.Add(card);
        }

        return masonry.Render();
    }
}

• Stack – For general vertical or horizontal stacking of UI components.
• Grid – For displaying items in a grid with fixed rows and columns.