Column Layout

Column layout applies to fixed-width containers, positioning items in a column-based flow from left to right and top to bottom.

Quick Start

import { createColumnLayoutAlgorithm, DndLayout, useLayout } from "dnd-layout";

export function ColumnSample() {
    const layout = useLayout(() => {
        return {
            algorithm: createColumnLayoutAlgorithm({ columns: 6 }),
            initialItems: [
                { id: "1", column: 0, columnSpan: 1, height: 100 },
                { id: "2", column: 1, columnSpan: 1, height: 100 },
                { id: "3", column: 2, columnSpan: 1, height: 100 },
                { id: "4", column: 3, columnSpan: 1, height: 100 },
                { id: "5", column: 4, columnSpan: 1, height: 100 },
                { id: "6", column: 5, columnSpan: 1, height: 100 },
                { id: "7", column: 0, columnSpan: 1, height: 100 },
                { id: "8", column: 1, columnSpan: 1, height: 100 },
                { id: "9", column: 2, columnSpan: 1, height: 100 },
                { id: "10", column: 3, columnSpan: 1, height: 100 },
                { id: "11", column: 4, columnSpan: 1, height: 100 },
                { id: "12", column: 5, columnSpan: 1, height: 100 },
                { id: "13", column: 0, columnSpan: 1, height: 100 },
            ],
        };
    });
    return (
        <DndLayout
            className="common-layout"
            layout={layout}
            itemRender={(item) => {
                return (
                    <div
                        className="common-layout-item"
                        style={{
                            height: 100,
                        }}
                    >
                        {item.id}
                    </div>
                );
            }}
        />
    );
}

API Reference

ColumnLayoutConfig

Property	Description	Type
columns	Total number of columns in the layout; must be a positive integer.	number

ColumnLayoutItem

Property	Description	Type
id	Unique and stable item identifier used for rendering.	string
column	Zero-based start column index where the item is placed.	number
columnSpan	Number of columns the item spans; clamped to a valid range during layout.	number
height	Preferred item height in pixels (used when measured size is not available).	number