Flexible Grid Layout

Arrange UI elements in standard grids, auto-fit responsive layouts, or masonry waterfall columns

Overview

Flexible Grid Layout is a grid system that extends Unity's built-in layout groups with support for standard grids, responsive auto-fit layouts, and masonry (waterfall) arrangements.

You can control fit type, row and column counts, cell sizing, spacing, stretch behavior, aspect ratio, and child size control. It integrates with ContentSizeFitter to support dynamic content heights.

Usage

Add Flexible Grid Layout component to a RectTransform

Add child UI elements under it

Choose a Fit Type to define how rows and columns are calculated

The layout updates automatically when values change

Notes

Auto Fit + Content Size Fitter — Pair with a ContentSizeFitter set to Preferred Size on the vertical axis to let the container grow as children are added.
Masonry mode — When masonry is enabled, each column advances independently. Children are not constrained to uniform row heights; each item uses its own height. This is ideal for card feeds or image galleries with variable content.
Preserve Aspect Ratio — Takes priority over Fit Y for height calculation. When enabled, cell height is derived from cellWidth / aspectRatio regardless of other stretch settings.
Control Child Width / Control Child Height — When disabled, children keep their own size and are positioned using the child alignment anchor instead of being stretched into the cell.

Fit Types

The fitType property controls how rows and columns are determined. Choose the mode that best fits your layout needs.

Fit Type	Description
`Uniform`	Keeps rows and columns equal (e.g. 2×2, 3×3). Enables both `fitX` and `fitY` automatically.
`Width`	Fixes the number of columns; rows expand downward to fit all children.
`Height`	Fixes the number of rows; columns expand sideways to fit all children.
`FixedColumns`	Locks the exact column count; rows grow as needed.
`FixedRows`	Locks the exact row count; columns grow as needed.
`AutoFit`	Calculates columns from `minCellSize` and available width, then stretches cells to fill. Best for responsive layouts.

Properties

Grid Settings

Name	Type	Description
`fitType`	`FitType`	Determines how rows and columns are calculated
`rows`	`int`	Number of rows (minimum 1). Used directly in `FixedRows` and `Height` modes
`columns`	`int`	Number of columns (minimum 1). Used directly in `FixedColumns` and `Width` modes

Cell Sizing & Spacing

Name	Type	Description
`spacing`	`Vector2`	Horizontal and vertical gap between cells
`minCellSize`	`Vector2`	Minimum cell dimensions. Used as the base size in `AutoFit` and fallback in other modes

Masonry / Flow

Name	Type	Description
`masonry`	`bool`	Enables waterfall (masonry) layout where each column tracks its own height independently

Child Control Size

Name	Type	Description
`controlChildWidth`	`bool`	Forces children to stretch to the full cell width
`controlChildHeight`	`bool`	Forces children to stretch to the full cell height

Stretch Settings

Name	Type	Description
`fitX`	`bool`	Allows cells to grow horizontally to fill remaining row space
`fitY`	`bool`	Allows cells to grow vertically to fill remaining column space

Aspect Ratio

Name	Type	Description
`preserveAspectRatio`	`bool`	Forces cell height to scale proportionally with its width
`aspectRatio`	`float`	Width divided by height. `1.0` is square, `> 1` is wide, `< 1` is tall

Code Example

FlexibleGridLayoutExample.cs

using UnityEngine;
using Evo.UI;

public class FlexibleGridLayoutExample : MonoBehaviour
{
    public FlexibleGridLayout grid;

    void Start()
    {
        // Use AutoFit to fill width responsively from a minimum cell size
        grid.SetFitType(FlexibleGridLayout.FitType.AutoFit);
        grid.MinCellSize = new Vector2(120f, 120f);

        // Cell spacing
        grid.Spacing = new Vector2(10f, 10f);

        // Stretch cells to fill available width
        grid.FitX = true;
        grid.FitY = false;

        // Force children to fill the full cell dimensions
        grid.ControlChildWidth = true;
        grid.ControlChildHeight = true;

        // Lock to a fixed column count instead
        // grid.SetFitType(FlexibleGridLayout.FitType.FixedColumns);
        // grid.Columns = 3;

        // Enable masonry (waterfall) layout
        grid.Masonry = false;

        // Lock cell aspect ratio to 16:9
        grid.PreserveAspectRatio = true;
        grid.AspectRatio = 16f / 9f;
    }
}

On this page