Edit CSS Grid

Name

Also known as (comma separated)

Brief definition Two-dimensional layout system.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "columns", "type": "select", "label": "grid-template-columns", "default": "1fr 1fr 1fr", "options": [ "1fr 1fr 1fr", "1fr 2fr 1fr", "repeat(4, 1fr)" ] }, { "id": "justifyItems", "type": "select", "label": "justify-items", "default": "stretch", "options": [ "stretch", "center", "start" ] }, { "id": "gap", "type": "number", "label": "Gap", "default": 10, "min": 0, "max": 28, "step": 2 }, { "id": "span", "type": "toggle", "label": "Item 1 spans 2 columns", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"cg-wrap\" role=\"img\" aria-label=\"CSS Grid: six cells arranged in a two-dimensional grid, first cell optionally spanning two columns\">\n <div class=\"cg-grid\" style=\"grid-template-columns:{{columns}};justify-items:{{justifyItems}};gap:{{gap}}px;\">\n <div class=\"cg-cell cg-cell--a\" style=\"{{#if span}}grid-column:span 2;{{/if}}\">1{{#if span}} span 2{{/if}}</div>\n <div class=\"cg-cell\">2</div>\n <div class=\"cg-cell\">3</div>\n <div class=\"cg-cell\">4</div>\n <div class=\"cg-cell\">5</div>\n <div class=\"cg-cell\">6</div>\n </div>\n <p class=\"cg-caption\">columns: {{columns}} &middot; justify-items: {{justifyItems}} &middot; gap {{gap}}px</p>\n</div>\n<style>\n.cg-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 320px; }\n.cg-grid { display: grid; }\n.cg-cell { background: #A8E6C1; border-radius: 8px; padding: 14px 8px; font-weight: 700; text-align: center; }\n.cg-cell--a { background: #F5C2E0; }\n.cg-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=\"CSS Grid: six cells arranged in a two-dimensional grid, first cell optionally spanning two columns\">\n <div class=\"grid\" style=\"grid-template-columns:{{columns}};justify-items:{{justifyItems}};gap:{{gap}}px;\">\n <div class=\"bg-[#F5C2E0] rounded-lg py-3.5 px-2 font-bold text-center\" style=\"{{#if span}}grid-column:span 2;{{/if}}\">1{{#if span}} span 2{{/if}}</div>\n <div class=\"bg-[#A8E6C1] rounded-lg py-3.5 px-2 font-bold text-center\">2</div>\n <div class=\"bg-[#A8E6C1] rounded-lg py-3.5 px-2 font-bold text-center\">3</div>\n <div class=\"bg-[#A8E6C1] rounded-lg py-3.5 px-2 font-bold text-center\">4</div>\n <div class=\"bg-[#A8E6C1] rounded-lg py-3.5 px-2 font-bold text-center\">5</div>\n <div class=\"bg-[#A8E6C1] rounded-lg py-3.5 px-2 font-bold text-center\">6</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">columns: {{columns}} &middot; justify-items: {{justifyItems}} &middot; gap {{gap}}px</p>\n</div>", "react": "export function CssGrid({\n columns = \"{{columns}}\",\n justifyItems = \"{{justifyItems}}\",\n gap = {{gap}},\n span = {{span}},\n}) {\n const cell = { borderRadius: 8, padding: \"14px 8px\", fontWeight: 700, textAlign: \"center\" };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 320 }}\n role=\"img\" aria-label=\"CSS Grid: six cells arranged in a two-dimensional grid, first cell optionally spanning two columns\">\n <div style={{ display: \"grid\", gridTemplateColumns: columns, justifyItems, gap }}>\n <div style={{ ...cell, background: \"#F5C2E0\", ...(span ? { gridColumn: \"span 2\" } : {}) }}>1{span ? \" span 2\" : \"\"}</div>\n <div style={{ ...cell, background: \"#A8E6C1\" }}>2</div>\n <div style={{ ...cell, background: \"#A8E6C1\" }}>3</div>\n <div style={{ ...cell, background: \"#A8E6C1\" }}>4</div>\n <div style={{ ...cell, background: \"#A8E6C1\" }}>5</div>\n <div style={{ ...cell, background: \"#A8E6C1\" }}>6</div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n columns: {columns} &middot; justify-items: {justifyItems} &middot; gap {gap}px\n </p>\n </div>\n );\n}" }