[{"data":1,"prerenderedAt":99},["ShallowReactive",2],{"tool-content-en-css-grid-generator":3},{"id":4,"title":5,"body":6,"description":89,"extension":90,"locale":91,"meta":92,"navigation":93,"path":94,"seo":95,"stem":96,"toolId":97,"__hash__":98},"tools\u002Ftools\u002Fen\u002Fcss-grid-generator.md","CSS Grid Generator",{"type":7,"value":8,"toc":82},"minimark",[9,14,35,39,50,54,79],[10,11,13],"h2",{"id":12},"visual-track-editing","Visual track editing",[15,16,17,18,22,23,26,27,30,31,34],"p",{},"Build a grid from column and row tracks of four types: ",[19,20,21],"code",{},"fr"," for flexible shares, ",[19,24,25],{},"px"," for fixed sizes, ",[19,28,29],{},"minmax"," for responsive bounds, and ",[19,32,33],{},"auto"," for content-sized tracks. Add or remove tracks up to twelve per axis, and tune the column and row gaps independently.",[10,36,38],{"id":37},"live-preview-with-real-ui","Live preview with real UI",[15,40,41,42,45,46,49],{},"The preview is a real grid container, not a diagram. Four presets — card grid, holy grail, dashboard, and gallery — each render genuine UI elements (header, nav, sidebar, metrics, image tiles) so you can see how your tracks behave with plausible content as you edit. Alignment is adjustable through ",[19,43,44],{},"justify-items"," and ",[19,47,48],{},"align-items",".",[10,51,53],{"id":52},"export","Export",[55,56,57,69],"ul",{},[58,59,60,64,65,68],"li",{},[61,62,63],"strong",{},"CSS",": a complete declaration with ",[19,66,67],{},"display: grid",", both track templates, the gap shorthand (merged when both gaps match), and alignment.",[58,70,71,74,75,78],{},[61,72,73],{},"Tailwind",": arbitrary-value utilities such as ",[19,76,77],{},"grid-cols-[1fr_200px]"," plus gap and alignment classes, skipping defaults.",[15,80,81],{},"Your layout is saved in this browser and restored on your next visit. All processing happens locally.",{"title":83,"searchDepth":84,"depth":84,"links":85},"",2,[86,87,88],{"id":12,"depth":84,"text":13},{"id":37,"depth":84,"text":38},{"id":52,"depth":84,"text":53},"Design CSS grid layouts visually with columns, rows, gaps, and alignment. Live preview with a real UI demo, exports CSS or Tailwind.","md","en",{},true,"\u002Ftools\u002Fen\u002Fcss-grid-generator",{"title":5,"description":89},"tools\u002Fen\u002Fcss-grid-generator","css-grid-generator","xzXTOUWjeql-xDUb3lLHR3BMldpxzZSOkmVpdod5lfc",1792391416950]