CSS Flexbox and Grid Playground

\n Layout Type:\n \n

\n {layoutType === 'flexbox' && (\n <>\n

\n Flex Direction:\n \n

\n Justify Content:\n \n

\n Align Items:\n \n

\n \n )}\n {layoutType === 'grid' && (\n <>\n

\n Grid Template Columns:\n setGridTemplateColumns(e.target.value)}\n placeholder=\"e.g., 1fr 1fr 1fr\"\n />\n

\n Grid Template Rows:\n setGridTemplateRows(e.target.value)}\n placeholder=\"e.g., 1fr 1fr 1fr\"\n />\n

\n Grid Gap:\n setGridGap(e.target.value)}\n placeholder=\"e.g., 10px\"\n />\n

\n \n )}\n

\n {[...Array(9)].map((_, index) => (\n

{index + 1}

\n ))}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n CSS Flexbox and Grid Playground\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n}\n\nh1 {\n text-align: center;\n}\n\n.control-panel {\n background-color: #f4f4f4;\n padding: 20px;\n border-radius: 5px;\n margin-bottom: 20px;\n}\n\n.control-panel div {\n margin-bottom: 10px;\n}\n\nlabel {\n display: inline-block;\n width: 150px;\n margin-right: 10px;\n}\n\nselect, input {\n width: 200px;\n padding: 5px;\n}\n\n.display-area {\n border: 2px solid #ccc;\n padding: 20px;\n min-height: 400px;\n}\n\n.container {\n height: 100%;\n min-height: 360px;\n}\n\n.item {\n background-color: #3498db;\n color: white;\n padding: 20px;\n font-size: 18px;\n text-align: center;\n}\n\nfooter {\n margin-top: 20px;\n text-align: center;\n font-size: 0.9em;\n color: #666;\n}\n\na {\n color: #3498db;\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/all/TufteCSS/code/main.tsx","extension","actionData","errors"]