Is it possible to create a "grid" with elements of different size?

[tdbe]

Like shown in this post.

I could position my elements "manually" via code just with rect transforms, but I'd love to actually have some kind of "builtin layout support" as well, otherwise I'll basically need to build my own "2d game engine collision" :P.

[tigran-sargsyan-w]

Unity’s built-in GridLayoutGroup uses one cell size, so it can’t do a Pinterest-style layout. In UI Extensions the closest “drop-in” is FlowLayoutGroup/TableLayoutGroup (handles mixed sizes but won’t tightly pack gaps). For a true masonry you’ll need a small custom LayoutGroup (sample below) or switch to UIToolkit’s Masonry.

---

Option A — “Good enough” flow (no gap-packing)

• Add FlowLayoutGroup to the container.
• On each item, add LayoutElement and set Preferred Width/Height (or drive via ContentSizeFitter).
• Result: rows wrap naturally with mixed heights. Not a true masonry, but simple and fast.

---

Option B — True Masonry (shortest-column packing)

Drop this minimal LayoutGroup on your container; each child goes to the shortest column.

using UnityEngine;
using UnityEngine.UI;
using System.Linq;

[AddComponentMenu("Layout/Masonry Layout Group")]
public class MasonryLayoutGroup : LayoutGroup
{
    [Min(1)] public int columns = 2;
    public float spacing = 8f;

    public override void CalculateLayoutInputHorizontal()
    {
        base.CalculateLayoutInputHorizontal();
        SetLayout();
    }

    public override void CalculateLayoutInputVertical()  => SetLayout();
    public override void SetLayoutHorizontal()           => SetLayout();
    public override void SetLayoutVertical()             => SetLayout();

    void SetLayout()
    {
        if (columns < 1) columns = 1;
        float width = rectTransform.rect.width - padding.horizontal - spacing * (columns - 1);
        float colWidth = width / columns;

        float[] heights = new float[columns];

        for (int i = 0; i < rectChildren.Count; i++)
        {
            var child = rectChildren[i];
            if (!child.gameObject.activeSelf) continue;

            float preferredH = LayoutUtility.GetPreferredHeight(child);
            float preferredW = LayoutUtility.GetPreferredWidth(child);
            float h = (preferredH > 0 && preferredW > 0) ? preferredH * (colWidth / preferredW) : preferredH;

            int col = 0;
            float min = heights[0];
            for (int c = 1; c < columns; c++) if (heights[c] < min) { min = heights[c]; col = c; }

            float x = padding.left + col * (colWidth + spacing);
            float y = padding.top + heights[col];

            SetChildAlongAxis(child, 0, x, colWidth);
            SetChildAlongAxis(child, 1, y, h);

            heights[col] += h + spacing;
        }

        float totalH = heights.Length > 0 ? heights.Max() : 0f;
        SetLayoutInputForAxis(padding.vertical + totalH, padding.vertical + totalH, -1, 1);
    }
}

Usage

1. Add Content Size Fitter to the container (Vertical Fit = Preferred Size).
2. Add MasonryLayoutGroup and set Columns/Spacing/Padding.
3. Give each item a LayoutElement (or set preferred sizes from code).
4. If items resize at runtime, call LayoutRebuilder.MarkLayoutForRebuild(containerRect) after changes.

---

UIToolkit alternative

If you’re on UIToolkit, its Masonry view (App UI package) gives packed columns + virtualized scrolling out of the box.

---

If this helped, please consider marking the answer as Accepted so others can find it quickly.