Edit Grid Container

Name

Also known as (comma separated)

Brief definition Parent using CSS Grid.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "columns", "type": "select", "label": "grid-template-columns", "default": "repeat(3, 1fr)", "options": [ "repeat(3, 1fr)", "repeat(2, 1fr)", "1fr 2fr 1fr" ] }, { "id": "rows", "type": "select", "label": "grid-auto-rows", "default": "56px", "options": [ "56px", "80px" ] }, { "id": "gap", "type": "number", "label": "Gap", "default": 10, "min": 0, "max": 28, "step": 2 }, { "id": "alignItems", "type": "select", "label": "align-items", "default": "stretch", "options": [ "stretch", "center", "start" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"gc-wrap\" role=\"img\" aria-label=\"A grid container parenting six cells; column tracks, row height, gap and align-items are adjustable\">\n <div class=\"gc-grid\" style=\"grid-template-columns:{{columns}};grid-auto-rows:{{rows}};gap:{{gap}}px;align-items:{{alignItems}};\">\n <div class=\"gc-cell\">1</div>\n <div class=\"gc-cell\">2</div>\n <div class=\"gc-cell\">3</div>\n <div class=\"gc-cell\">4</div>\n <div class=\"gc-cell\">5</div>\n <div class=\"gc-cell\">6</div>\n </div>\n <p class=\"gc-caption\">columns: {{columns}} &middot; row height {{rows}} &middot; gap {{gap}}px &middot; align-items: {{alignItems}}</p>\n</div>\n<style>\n.gc-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.gc-grid { display: grid; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; }\n.gc-cell { background: #D9C8F0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; height: 30px; }\n.gc-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 grid container parenting six cells; column tracks, row height, gap and align-items are adjustable\">\n <div class=\"grid bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border\" style=\"grid-template-columns:{{columns}};grid-auto-rows:{{rows}};gap:{{gap}}px;align-items:{{alignItems}};\">\n <div class=\"bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]\">1</div>\n <div class=\"bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]\">2</div>\n <div class=\"bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]\">3</div>\n <div class=\"bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]\">4</div>\n <div class=\"bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]\">5</div>\n <div class=\"bg-[#D9C8F0] rounded-md flex items-center justify-center font-bold h-[30px]\">6</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">columns: {{columns}} &middot; row height {{rows}} &middot; gap {{gap}}px &middot; align-items: {{alignItems}}</p>\n</div>", "react": "export function GridContainer({\n columns = \"{{columns}}\",\n rows = \"{{rows}}\",\n gap = {{gap}},\n alignItems = \"{{alignItems}}\",\n}) {\n const cell = { background: \"#D9C8F0\", borderRadius: 6, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontWeight: 700, height: 30 };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }}\n role=\"img\" aria-label=\"A grid container parenting six cells; column tracks, row height, gap and align-items are adjustable\">\n <div style={{ display: \"grid\", gridTemplateColumns: columns, gridAutoRows: rows, gap, alignItems,\n background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 10, boxSizing: \"border-box\" }}>\n <div style={cell}>1</div><div style={cell}>2</div><div style={cell}>3</div>\n <div style={cell}>4</div><div style={cell}>5</div><div style={cell}>6</div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n columns: {columns} &middot; row height {rows} &middot; gap {gap}px &middot; align-items: {alignItems}\n </p>\n </div>\n );\n}" }