Edit Masonry Grid

Name

Also known as (comma separated)

Brief definition Gallery layout with varied item heights packed together.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "columns", "type": "number", "label": "Columns", "default": 3, "min": 2, "max": 4, "step": 1 }, { "id": "gap", "type": "number", "label": "Gap", "default": 8, "min": 0, "max": 16, "step": 1 }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 10, "min": 0, "max": 16, "step": 1 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"masonry\" style=\"columns:{{columns}};column-gap:{{gap}}px;\">\n <div class=\"masonry__tile\" style=\"height:120px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;border-top:3px solid {{accent}};\"><svg viewBox=\"0 0 200 120\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"120\" fill=\"#BFD9F2\"/></svg></div>\n <div class=\"masonry__tile\" style=\"height:180px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;\"><svg viewBox=\"0 0 200 180\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"180\" fill=\"#D9C8F0\"/></svg></div>\n <div class=\"masonry__tile\" style=\"height:90px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;border-top:3px solid {{accent}};\"><svg viewBox=\"0 0 200 90\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"90\" fill=\"#F5C2E0\"/></svg></div>\n <div class=\"masonry__tile\" style=\"height:150px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;\"><svg viewBox=\"0 0 200 150\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"150\" fill=\"#A8E6C1\"/></svg></div>\n <div class=\"masonry__tile\" style=\"height:110px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;\"><svg viewBox=\"0 0 200 110\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"110\" fill=\"#E8A02033\"/></svg></div>\n <div class=\"masonry__tile\" style=\"height:160px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;border-top:3px solid {{accent}};\"><svg viewBox=\"0 0 200 160\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"160\" fill=\"#BFD9F2\"/></svg></div>\n</div>\n<style>\n.masonry { max-width: 380px; }\n.masonry__tile { break-inside: avoid; overflow: hidden; background: #FAF7F2; border: 1px solid #24143022; }\n.masonry__tile svg { display: block; }\n</style>", "tailwind": "<div class=\"masonry-tw max-w-[380px]\" style=\"columns:{{columns}};column-gap:{{gap}}px;\">\n <div class=\"masonry-tw__tile break-inside-avoid overflow-hidden bg-[#FAF7F2] border border-[#24143022]\" style=\"height:120px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;border-top:3px solid {{accent}};\"><svg viewBox=\"0 0 200 120\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"120\" fill=\"#BFD9F2\"/></svg></div>\n <div class=\"masonry-tw__tile break-inside-avoid overflow-hidden bg-[#FAF7F2] border border-[#24143022]\" style=\"height:180px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;\"><svg viewBox=\"0 0 200 180\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"180\" fill=\"#D9C8F0\"/></svg></div>\n <div class=\"masonry-tw__tile break-inside-avoid overflow-hidden bg-[#FAF7F2] border border-[#24143022]\" style=\"height:90px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;border-top:3px solid {{accent}};\"><svg viewBox=\"0 0 200 90\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"90\" fill=\"#F5C2E0\"/></svg></div>\n <div class=\"masonry-tw__tile break-inside-avoid overflow-hidden bg-[#FAF7F2] border border-[#24143022]\" style=\"height:150px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;\"><svg viewBox=\"0 0 200 150\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"150\" fill=\"#A8E6C1\"/></svg></div>\n <div class=\"masonry-tw__tile break-inside-avoid overflow-hidden bg-[#FAF7F2] border border-[#24143022]\" style=\"height:110px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;\"><svg viewBox=\"0 0 200 110\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"110\" fill=\"#E8A02033\"/></svg></div>\n <div class=\"masonry-tw__tile break-inside-avoid overflow-hidden bg-[#FAF7F2] border border-[#24143022]\" style=\"height:160px;margin-bottom:{{gap}}px;border-radius:{{radius}}px;border-top:3px solid {{accent}};\"><svg viewBox=\"0 0 200 160\" width=\"100%\" height=\"100%\" aria-hidden=\"true\"><rect width=\"200\" height=\"160\" fill=\"#BFD9F2\"/></svg></div>\n</div>", "react": "export function MasonryGrid({\n columns = {{columns}},\n gap = {{gap}},\n radius = {{radius}},\n accent = \"{{accent}}\",\n}) {\n const tiles = [\n { h: 120, fill: \"#BFD9F2\", accented: true },\n { h: 180, fill: \"#D9C8F0\", accented: false },\n { h: 90, fill: \"#F5C2E0\", accented: true },\n { h: 150, fill: \"#A8E6C1\", accented: false },\n { h: 110, fill: \"#E8A02033\", accented: false },\n { h: 160, fill: \"#BFD9F2\", accented: true },\n ];\n return (\n <div style={{ maxWidth: 380, columns, columnGap: gap }}>\n {tiles.map((t, i) => (\n <div key={i} style={{ breakInside: \"avoid\", overflow: \"hidden\", background: \"#FAF7F2\",\n border: \"1px solid #24143022\", height: t.h, marginBottom: gap, borderRadius: radius,\n borderTop: t.accented ? `3px solid ${accent}` : undefined }}>\n <svg viewBox={`0 0 200 ${t.h}`} width=\"100%\" height=\"100%\" aria-hidden=\"true\">\n <rect width=\"200\" height={t.h} fill={t.fill} />\n </svg>\n </div>\n ))}\n </div>\n );\n}" }