Edit Gap

Name

Also known as (comma separated)

Brief definition Space between layout items.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "gap", "type": "number", "label": "Gap", "default": 16, "min": 0, "max": 40, "step": 2 }, { "id": "layout", "type": "select", "label": "Layout", "default": "row", "options": [ "row", "column", "grid" ] }, { "id": "itemSize", "type": "number", "label": "Item size", "default": 48, "min": 28, "max": 72, "step": 4 }, { "id": "background", "type": "color", "label": "Item colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"gp-wrap\" role=\"img\" aria-label=\"Five boxes spaced by the CSS gap property, without margins on the boxes themselves\">\n <div class=\"gp-parent\" data-layout=\"{{layout}}\" style=\"gap:{{gap}}px;\">\n <div class=\"gp-item\" style=\"width:{{itemSize}}px;height:{{itemSize}}px;background:{{background}};\">1</div>\n <div class=\"gp-item\" style=\"width:{{itemSize}}px;height:{{itemSize}}px;background:{{background}};\">2</div>\n <div class=\"gp-item\" style=\"width:{{itemSize}}px;height:{{itemSize}}px;background:{{background}};\">3</div>\n </div>\n <p class=\"gp-caption\">gap: {{gap}}px &middot; layout: {{layout}}</p>\n</div>\n<style>\n.gp-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.gp-parent { background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 12px; box-sizing: border-box; }\n.gp-parent[data-layout=\"row\"] { display: flex; flex-direction: row; }\n.gp-parent[data-layout=\"column\"] { display: flex; flex-direction: column; }\n.gp-parent[data-layout=\"grid\"] { display: grid; grid-template-columns: repeat(3, 1fr); }\n.gp-item { border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; }\n.gp-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[320px]\" role=\"img\" aria-label=\"Five boxes spaced by the CSS gap property, without margins on the boxes themselves\">\n <div class=\"gp-tw bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-3 box-border\" data-layout=\"{{layout}}\" style=\"gap:{{gap}}px;\">\n <div class=\"rounded-md flex items-center justify-center font-bold\" style=\"width:{{itemSize}}px;height:{{itemSize}}px;background:{{background}};\">1</div>\n <div class=\"rounded-md flex items-center justify-center font-bold\" style=\"width:{{itemSize}}px;height:{{itemSize}}px;background:{{background}};\">2</div>\n <div class=\"rounded-md flex items-center justify-center font-bold\" style=\"width:{{itemSize}}px;height:{{itemSize}}px;background:{{background}};\">3</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">gap: {{gap}}px &middot; layout: {{layout}}</p>\n</div>\n<style>\n.gp-tw[data-layout=\"row\"] { display: flex; flex-direction: row; }\n.gp-tw[data-layout=\"column\"] { display: flex; flex-direction: column; }\n.gp-tw[data-layout=\"grid\"] { display: grid; grid-template-columns: repeat(3, 1fr); }\n</style>", "react": "export function Gap({\n gap = {{gap}},\n layout = \"{{layout}}\",\n itemSize = {{itemSize}},\n background = \"{{background}}\",\n}) {\n const parent = { background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 12, boxSizing: \"border-box\", gap,\n ...(layout === \"grid\" ? { display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\" } : { display: \"flex\", flexDirection: layout }) };\n const item = { width: itemSize, height: itemSize, background, borderRadius: 6, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontWeight: 700 };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }}\n role=\"img\" aria-label=\"Five boxes spaced by the CSS gap property, without margins on the boxes themselves\">\n <div style={parent}>\n <div style={item}>1</div><div style={item}>2</div><div style={item}>3</div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>gap: {gap}px &middot; layout: {layout}</p>\n </div>\n );\n}" }