Edit Grid Item

Name

Also known as (comma separated)

Brief definition Child within CSS Grid.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "colSpan", "type": "number", "label": "grid-column: span (target)", "default": 2, "min": 1, "max": 3, "step": 1 }, { "id": "rowSpan", "type": "number", "label": "grid-row: span (target)", "default": 1, "min": 1, "max": 2, "step": 1 }, { "id": "justifySelf", "type": "select", "label": "justify-self (target)", "default": "stretch", "options": [ "stretch", "center", "end" ] }, { "id": "alignSelf", "type": "select", "label": "align-self (target)", "default": "stretch", "options": [ "stretch", "center", "end" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"gi-wrap\" role=\"img\" aria-label=\"A 3 by 2 grid; the highlighted target cell's column span, row span, justify-self and align-self are adjustable\">\n <div class=\"gi-grid\">\n <div class=\"gi-cell gi-cell--target\" style=\"grid-column:span {{colSpan}};grid-row:span {{rowSpan}};justify-self:{{justifySelf}};align-self:{{alignSelf}};\">target</div>\n <div class=\"gi-cell\">b</div>\n <div class=\"gi-cell\">c</div>\n <div class=\"gi-cell\">d</div>\n <div class=\"gi-cell\">e</div>\n </div>\n <p class=\"gi-caption\">span {{colSpan}}&times;{{rowSpan}} &middot; justify-self: {{justifySelf}} &middot; align-self: {{alignSelf}}</p>\n</div>\n<style>\n.gi-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.gi-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 56px; gap: 8px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; }\n.gi-cell { background: #A8E6C1; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 600; }\n.gi-cell--target { background: #F5C2E0; font-weight: 700; }\n.gi-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=\"A 3 by 2 grid; the highlighted target cell's column span, row span, justify-self and align-self are adjustable\">\n <div class=\"grid grid-cols-3 auto-rows-[56px] gap-2 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border\">\n <div class=\"bg-[#F5C2E0] rounded-md flex items-center justify-center font-bold\" style=\"grid-column:span {{colSpan}};grid-row:span {{rowSpan}};justify-self:{{justifySelf}};align-self:{{alignSelf}};\">target</div>\n <div class=\"bg-[#A8E6C1] rounded-md flex items-center justify-center font-semibold\">b</div>\n <div class=\"bg-[#A8E6C1] rounded-md flex items-center justify-center font-semibold\">c</div>\n <div class=\"bg-[#A8E6C1] rounded-md flex items-center justify-center font-semibold\">d</div>\n <div class=\"bg-[#A8E6C1] rounded-md flex items-center justify-center font-semibold\">e</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">span {{colSpan}}&times;{{rowSpan}} &middot; justify-self: {{justifySelf}} &middot; align-self: {{alignSelf}}</p>\n</div>", "react": "export function GridItem({\n colSpan = {{colSpan}},\n rowSpan = {{rowSpan}},\n justifySelf = \"{{justifySelf}}\",\n alignSelf = \"{{alignSelf}}\",\n}) {\n const cell = { background: \"#A8E6C1\", borderRadius: 6, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontWeight: 600 };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }}\n role=\"img\" aria-label=\"A 3 by 2 grid; the highlighted target cell's column span, row span, justify-self and align-self are adjustable\">\n <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gridAutoRows: 56, gap: 8,\n background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 10, boxSizing: \"border-box\" }}>\n <div style={{ ...cell, background: \"#F5C2E0\", fontWeight: 700, gridColumn: `span ${colSpan}`, gridRow: `span ${rowSpan}`, justifySelf, alignSelf }}>target</div>\n <div style={cell}>b</div><div style={cell}>c</div><div style={cell}>d</div><div style={cell}>e</div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n span {colSpan}&times;{rowSpan} &middot; justify-self: {justifySelf} &middot; align-self: {alignSelf}\n </p>\n </div>\n );\n}" }