[{"data":1,"prerenderedAt":343},["ShallowReactive",2],{"project-40952509":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":33,"aspects":34,"strip":40,"post_text":41,"what":42,"said":77,"maker_in_thread":177,"shape":180,"grid":184,"attempts":305,"same_week":306,"maker_shows":36,"maker_hidden":335,"reader_version":336,"card":337},"40952509","CSS grid generator","A drag and drop CSS grid generator","title","Show HN: I made a drag and drop CSS grid generator","https:\u002F\u002Fcssgridgenerator.io\u002F","cssgridgenerator.io","Kristjan_Retter",1720856649,2024,262,44,281,3515,8,"legend","dev_tools","css layout generator","web_app",[24,25,26,27],"css grid","grid generator","css layout","drag and drop css","debated",0.211,{"positive":18,"neutral":31,"mixed":32,"critical":31},5,0,18,{"execution":35,"idea":37,"performance":39},{"positive":36,"critical":31},1,{"positive":38,"critical":32},3,{"positive":36,"critical":32},[36,32,36,32,36,38,32,32,31,32,32,32,31,32,32,31,36,36,32,31,38,38,38,32,38,32,32,31,31,31,32,32,32,32,32,32,32,32,32,32],null,{"problem":43,"audience":55,"pricing":41,"motivation":67,"time_to_build":41,"stack":74,"openness":75,"stage":76,"team_size":75},{"value":44,"source":45,"evidence":46},"Writing CSS grid layouts by hand is hard to learn and fiddly.","inferred",[47,51],{"id":48,"by":49,"text":50},"40953388","memset","Thank you! I’m an older programmer and can do grids using tables by muscle memory - and have always struggled to figure out the right css layout. Tools like this are super helpful.",{"id":52,"by":53,"text":54},"40954561","catapart","This is really great! Thanks for making it! I will say, personally, my problems with grid are usually centered around getting them to do the expected dynamic rearrangement,…",{"value":56,"source":45,"evidence":57},"Web developers and people learning CSS grid.",[58,59,63],{"id":48,"by":49,"text":50},{"id":60,"by":61,"text":62},"40952845","mansarip","Tools like this are actually very helpful especially if you are learning to understand them. A few years ago, I found a site generator similar to this one, but it wasn't drag and…",{"id":64,"by":65,"text":66},"40954226","ericyd","Really great UX for me. I am a full time web dev but I write page layouts so infrequently that I've never learned grid syntax deeply. Bookmarking this for the future.",{"value":68,"source":69,"evidence":70},"Maker previously built a Tailwind grid generator and wanted a similar tool for plain CSS.","maker",[71],{"id":72,"by":11,"text":73},"40952513","I previously made a Tailwind Grid Generator to make grid layouts with Tailwind CSS easier. It received a lot of positive feedback, so I decided to create a similar tool for plain…",[],"unknown","launched",{"praise":78,"objections":97,"requests":127,"questions":139,"alternatives":154},[79,89],{"value":80,"source":81,"evidence":82},"Helpful for learning CSS grid syntax and visuals.","commenter",[83,84,88],{"id":60,"by":61,"text":62},{"id":85,"by":86,"text":87},"40953841","emadda","Nice tool. I feel generators are good learning tools, but once you grasp the syntax and features you gain more flexibility and are able to connect code to a concrete visual in…",{"id":64,"by":65,"text":66},{"value":90,"source":81,"evidence":91},"Simple, good UX, works well on mobile.",[92,93],{"id":64,"by":65,"text":66},{"id":94,"by":95,"text":96},"40953506","atum47","Works really well on mobile. Nice job",[98,113,120],{"value":99,"source":81,"evidence":100},"Boxes can be dragged outside the grid boundaries.",[101,105,109],{"id":102,"by":103,"text":104},"40953226","AlexDragusin","Nice, however there is an issue, for example add a few boxes then if you try to move one and move it as towards the others to overlap, eventually they go all the way down,…",{"id":106,"by":107,"text":108},"40962224","bduffany","I reproduced this too: 1. Click the box in the bottom right corner to create a cell. 2. Click the box just to the left of that one to create another cell. 3. Drag the cell you…",{"id":110,"by":111,"text":112},"40953009","yonatan8070","That's super cool! One thing that I noticed is that you can drag\u002Fpush grid elements outside of the grid's boundaries, which is probably undesired",{"value":114,"source":81,"evidence":115},"Layout is not responsive to window resizing and rows misalign.",[116],{"id":117,"by":118,"text":119},"40953844","dnpls","I found 2 bugs: - the width is not responsive, if you resize the browser window the boxes don't resize. - the boxes are shorter than the containers (for me, on Chrome on macOS)…",{"value":121,"source":81,"evidence":122},"Column count above 12 parses incorrectly.",[123],{"id":124,"by":125,"text":126},"40954666","karmakaze","I'm not a web dev, but I imagine that some may want more than 12 columns, like if I were making a game with many cells. I tried entering a larger number but the parsing was weird…",[128,135],{"value":129,"source":81,"evidence":130},"Open-source the page code.",[131],{"id":132,"by":133,"text":134},"40953283","ghosty141","Have you thought about open-sourcing the code for this page? I'd be curious how you made this. Works really well!",{"value":136,"source":81,"evidence":137},"Store grid state in the URL so layouts can be shared.",[138],{"id":52,"by":53,"text":54},[140,147],{"value":141,"source":81,"evidence":142},"Why use divs instead of semantic elements?",[143],{"id":144,"by":145,"text":146},"40958572","mediumsmart","Why the divs? body, nav, header, main, aside and footer display:grid and done. The rest is article and picture and if you really need a section ok have one, but that is it or am…",{"value":148,"source":81,"evidence":149},"Why use class names like div1 instead of inline styles?",[150],{"id":151,"by":152,"text":153},"40953416","beardyw","Isn't it odd to have class div1 div2 etc. Isn't that what the style attribute is for?",[155,159,166],{"value":156,"source":69,"evidence":157},"Tailwind Grid Generator by the maker.",[158],{"id":72,"by":11,"text":73},{"value":160,"source":81,"evidence":161},"FlexboxCSS (flexboxcss.com) for flexbox.",[162],{"id":163,"by":164,"text":165},"40955247","lovegrenoble","Interesting tool, even better than mine, for FlexBox CSS: https:\u002F\u002Fflexboxcss.com",{"value":167,"source":81,"evidence":168},"CSS Grid Garden and MDN guides for learning grid.",[169,173],{"id":170,"by":171,"text":172},"40953411","ffsm8","And this one is for the grid https:\u002F\u002Fcssgridgarden.com\u002F",{"id":174,"by":175,"text":176},"40953055","tgv","MDN has complete pages on all features, including their compatibility, and decent introductions: https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_grid_layout#guides",{"comments":36,"answered":32,"key":178},[179],{"id":72,"text":73},{"commenters":181,"max_depth":182,"maker_replies":36,"first_comment_mins":32,"lifespan_hours":183},41,4,47,[185,187,191,192,194,195,198,202,204,206,209,212,215,218,219,223,226,228,230,231,233,236,238,241,244,247,249,252,255,259,262,267,271,274,279,282,283,286,289,292,295,298,299,302],[102,32,36,186,103,32],"project\u002Fcritical\u002Fexecution",[188,32,32,189,190,32],"40956785","commenter\u002Fneutral\u002Fnone","riddley",[106,32,36,186,107,32],[72,36,32,193,11,36],"maker\u002Fneutral\u002Fidea",[110,36,36,186,111,32],[85,196,38,197,86,32],2,"project\u002Fneutral\u002Fidea",[199,196,32,200,201,32],"40954042","other\u002Fneutral\u002Fnone","dylan604",[203,196,32,200,86,32],"40954703",[48,38,31,205,49,32],"project\u002Fpositive\u002Fidea",[207,38,32,200,208,32],"40953514","hereonout2",[210,38,32,200,211,32],"40953692","lysp",[213,38,32,200,214,32],"40954225","lofaszvanitt",[216,38,32,200,217,32],"40954260","replwoacause",[60,182,31,205,61,32],[220,31,32,221,222,32],"40953421","other\u002Fneutral\u002Fidea","endofreach",[224,31,32,221,225,32],"40953832","hinnisdael",[52,227,31,205,53,32],6,[117,229,36,186,118,32],7,[124,18,36,186,125,32],[144,232,32,200,145,32],9,[64,234,31,235,65,32],10,"project\u002Fpositive\u002Fexecution",[163,237,32,200,164,32],11,[132,239,38,240,133,32],12,"maker\u002Fneutral\u002Fnone",[242,239,38,240,243,32],"40953360","yupyupyups",[245,239,38,240,246,32],"40953769","kristopolous",[248,239,32,189,243,32],"40961275",[151,250,38,251,152,32],13,"project\u002Fneutral\u002Fexecution",[253,250,32,189,254,32],"40953550","Akronymus",[256,257,32,200,258,32],"40953065",14,"jslakro",[94,260,31,261,95,32],15,"project\u002Fpositive\u002Fperformance",[263,264,31,265,266,32],"40953735",16,"project\u002Fpositive\u002Fnone","SandraBucky",[268,269,31,265,270,32],"40953482",17,"spiel24",[272,33,31,265,273,32],"40965663","alexliu518",[275,276,32,277,278,32],"40952821",19,"other\u002Fneutral\u002Fdocs","robxorb",[280,276,32,277,281,32],"40952884","afloatboat",[170,276,32,277,171,32],[284,276,32,200,285,32],"40952891","zadokshi",[287,276,32,200,288,32],"40953333","Brajeshwar",[290,276,32,200,291,32],"40953351","danielvaughn",[293,276,32,200,294,32],"40952896","6510",[296,276,32,189,297,32],"40954412","Etheryte",[174,276,32,277,175,32],[300,276,32,277,301,32],"40953292","promiseofbeans",[303,276,32,304,278,32],"40955984","other\u002Fpositive\u002Fdocs",[],[307,312,317,322,326,330],{"id":308,"name":309,"points":310,"category":311},"40956087","Resurrecting a dead Dune RTS game",485,"games",{"id":313,"name":314,"points":315,"category":316},"40972122","Horizon",361,"web_saas",{"id":318,"name":319,"points":320,"category":321},"40960508","Buzzinga",284,"consumer_social",{"id":323,"name":324,"points":325,"category":20},"40961101","Kaskade",164,{"id":327,"name":328,"points":329,"category":20},"40980715","Magic-cli",158,{"id":331,"name":332,"points":333,"category":334},"40989451","Tracklist",157,"creative",false,"v2",{"id":338,"name":5,"line":6,"ai":335,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":339,"top":18,"kw":340,"maker":11,"domain":10,"tier":19,"attempts":32,"strip":341,"url":9,"mix":342,"praise":80,"objection":99,"sub":21},40952509,0.21,[24,25,26,27],"1010130050005005110533303005550000000000",[18,31,32,31],1794036657751]