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`;",[],[172],"files",[151,170],"counts",{"_183":32,"_184":119,"_185":32,"_186":187},"pulls","branches","forks","envVars",{"_188":32,"_189":32},"count","emptyCount","contents",[192,195],{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":119,"_159":108,"_104":193,"_99":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_98":194},["D",1724288207717],[153],{"_102":171,"_95":172,"_154":115,"_156":-5,"_157":139,"_158":138,"_159":108,"_104":196,"_99":174,"_161":175,"_163":176,"_165":22,"_166":-5,"_98":197},["D",1724302166394],[172],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":206,"_190":211,"_216":217,"_220":-5,"_221":-5,"_179":222,"_229":230,"_231":-5,"_232":-5},{"_102":103,"_95":96,"_104":207,"_106":-5,"_107":108,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":108,"_117":-5,"_118":119,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":208,"_133":209,"_136":210,"_148":22},["D",1746218316768],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[212,214],{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":119,"_159":108,"_104":193,"_99":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_98":213},[153],{"_102":171,"_95":172,"_154":115,"_156":-5,"_157":139,"_158":138,"_159":108,"_104":196,"_99":174,"_161":175,"_163":176,"_165":22,"_166":-5,"_98":215},[172],"readme",{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":119,"_159":108,"_104":218,"_99":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_98":219},["D",1724288207717],[153],"upstream","pull",[223,226],{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":119,"_159":108,"_104":160,"_99":32,"_161":162,"_163":164,"_165":22,"_166":-5,"_167":224,"_98":225},[],[153],{"_102":171,"_95":172,"_154":115,"_156":-5,"_157":139,"_158":138,"_159":108,"_104":173,"_99":174,"_161":175,"_163":176,"_165":22,"_166":-5,"_167":227,"_98":228},[],[172],"previews",[226],"ahead","behind","actionData","errors"]

all

TufteCSS

CSS Explorer