[{"data":1,"prerenderedAt":460},["ShallowReactive",2],{"project-17618059":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":43,"post_text":44,"what":45,"said":67,"maker_in_thread":210,"shape":221,"grid":226,"attempts":414,"same_week":423,"maker_shows":223,"maker_hidden":452,"reader_version":453,"card":454},"17618059","Layoutit","An interactive CSS Grid generator","title","Show HN: Layoutit – An interactive CSS Grid generator","http:\u002F\u002Flayoutit.com\u002Fgrid","layoutit.com","rofko",1532617780,2018,437,71,35,2155,2,"legend","dev_tools","css grid generator","web_app",[24,25,26,27],"css grid","grid generator","css layout","visual css editor","debated",0.074,{"positive":31,"neutral":31,"mixed":18,"critical":32},9,8,28,{"idea":35,"execution":38,"design":40,"performance":41},{"positive":36,"critical":37},5,1,{"positive":37,"critical":39},3,{"positive":18,"critical":37},{"positive":42,"critical":37},0,[42,42,37,42,39,42,42,42,42,42,42,42,42,42,42,39,39,37,39,39,36,42,42,37,36,36,37,39,36,37,36,39,39,42,42,39,39,42,37,36],null,{"problem":46,"audience":44,"pricing":44,"motivation":44,"time_to_build":44,"stack":52,"openness":65,"stage":66,"team_size":65},{"value":47,"source":48,"evidence":49},"Hard to write and visualise CSS Grid layouts by hand.","inferred",[50],{"id":51},"post",[53,60],{"value":54,"source":48,"evidence":55},"JavaScript",[56],{"id":57,"by":58,"text":59},"17642250","snowpanda","It won't load for me :( Loading failed for the \u003Cscript> with source “https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Flodash.js\u002F4.17.10\u002Flodash.min.js”.",{"value":61,"source":62,"evidence":63},"lodash","commenter",[64],{"id":57,"by":58,"text":59},"unknown","launched",{"praise":68,"objections":98,"requests":143,"questions":169,"alternatives":188},[69,80,87],{"value":70,"source":62,"evidence":71},"Visual click interactions for defining grid areas are good",[72,76],{"id":73,"by":74,"text":75},"17618490","jordache","very nice. very good click interactions for defining a grid area",{"id":77,"by":78,"text":79},"17618287","rhencke","This is pretty slick. Nice job on visualizing CSS grids and their properties. There are some really nice touches, like when you drag a grid boundary, it highlights the changing…",{"value":81,"source":62,"evidence":82},"Helpful for learning CSS Grid",[83],{"id":84,"by":85,"text":86},"17618333","coding123","Very nice - I feel like I just learned CSS Grid in like 2 seconds. Also learned about fr units: https:\u002F\u002Falligator.io\u002Fcss\u002Fcss-grid-layout-fr-unit\u002F",{"value":88,"source":62,"evidence":89},"CodePen export is a useful feature",[90,94],{"id":91,"by":92,"text":93},"17618632","melvster","I like the export to codepen feature. Anyone know how that works?",{"id":95,"by":96,"text":97},"17618399","amichal","Very helpful! I don't know much about css grid support but I played around with \"Grid Gap\" and got it working in your tool but when i exported it to a \"CodePen\" (awesome feature…",[99,110,117,125,132],{"value":100,"source":62,"evidence":101},"Buggy when editing and reshaping nested grids",[102,106],{"id":103,"by":104,"text":105},"17620080","ArlenBales","A lot of potential here to be the best CSS Grid visual editor, but there's some bugs to be ironed out for sure. Currently I can't finish my grid. I'm trying to increase the…",{"id":107,"by":108,"text":109},"17618739","dnadler","This is cool, but I'm having a lot of trouble reshaping the grids, and editing things that I've already created. For example, I can't click on certain elements, dragging to make…",{"value":111,"source":62,"evidence":112},"Slow with large grids",[113],{"id":114,"by":115,"text":116},"17622218","anonytrary","It's really slow, especially when you get to 40x40-ish. Does something like this need to be that slow? I'm curious if there are more optimized solutions.",{"value":118,"source":62,"evidence":119},"CodePen export does not match editor output",[120,124],{"id":121,"by":122,"text":123},"17620203","werber","https:\u002F\u002Fcodepen.io\u002Fwerber\u002Fpen\u002FoMGNQe What I see in the editor is totally different than what comes over to codepen. Seems like this tool has some amazing potential!",{"id":95,"by":96,"text":97},{"value":126,"source":62,"evidence":127},"Not mobile friendly",[128],{"id":129,"by":130,"text":131},"17618467","kjsthree","This looks great! Extra kudos for it working on mobile (iOS 11 anyway). I’m usually checking HN on my phone and these things rarely work there.",{"value":133,"source":62,"evidence":134},"Domain name is unfortunate",[135,139],{"id":136,"by":137,"text":138},"17618735","orliesaurus","The site is great, but the name of the domain is unfortunate",{"id":140,"by":141,"text":142},"17620063","stuntkite","This is super cool! Only sort of related, I wonder how long they stared at that name and that it had `tit` in it before they decided to go all lowercase because they thought it…",[144,155,162],{"value":145,"source":62,"evidence":146},"Add Flexbox generator",[147,151],{"id":148,"by":149,"text":150},"17618811","reaperducer","If you're taking requests, a similar page for Flexbox would be the bee's knees.",{"id":152,"by":153,"text":154},"17622202","zmix","Mixing in flexbox would be nice...",{"value":156,"source":62,"evidence":157},"Generators for other CSS features like gradients and shadows",[158],{"id":159,"by":160,"text":161},"17622421","okonomiyaki3000","This is very helpful and hope you'll consider making a whole series of generators for the trickier parts of css for example: gradientit animatit transformtit flexboxtit…",{"value":163,"source":62,"evidence":164},"Support for component design systems",[165],{"id":166,"by":167,"text":168},"17623030","nicostouch","I used to really love the bootstrap layoutit tool. Used that heaps in the past. Can you guys please make one for design systems (like Prime React, Element, Vue Admin etc) in…",[170,181],{"value":171,"source":62,"evidence":172},"Browser support for CSS Grid and IE",[173,177],{"id":174,"by":175,"text":176},"17619333","zlepper","IE support? Only an old version of grid is supported in IE. One which is not compatible with the new spec.",{"id":178,"by":179,"text":180},"17619340","sarreph","Browser support as well. Grid is only about \u003C90% covered. https:\u002F\u002Fcaniuse.com\u002F#feat=css-grid",{"value":182,"source":62,"evidence":183},"Does CSS Grid support size transition animations",[184],{"id":185,"by":186,"text":187},"17619444","ak39","Does CSS grid support size transition animations?",[189,196,203],{"value":190,"source":62,"evidence":191},"cssgrid.cc",[192],{"id":193,"by":194,"text":195},"17618427","peterjonesio","Nice tool, will take a proper look at this later this evening. Reminds me of this offline tool: https:\u002F\u002Fcssgrid.cc\u002F which is also quite well rated",{"value":197,"source":62,"evidence":198},"Flexbox Froggy",[199],{"id":200,"by":201,"text":202},"17619339","gr3yh47","not exactly what you're looking for but kind of close http:\u002F\u002Fflexboxfroggy.com\u002F",{"value":204,"source":62,"evidence":205},"gridbyexample.com",[206],{"id":207,"by":208,"text":209},"17619557","molszanski","Grid can also be amazing for dynamic number of elements! Check this out: https:\u002F\u002Fgridbyexample.com\u002Fexamples\u002Fexample17 Grid has an amazing repeat feature:…",{"comments":32,"answered":37,"key":211},[212,215,218],{"id":213,"text":214},"17620315","Thank you! CSS Grid is awesome.",{"id":216,"text":217},"17620170","Thanks for your report! We'll definitely work on fixing bugs for complex nested grids. We usually update it every week. Cheers",{"id":219,"text":220},"17723930","We have just pushed an update that should fix this and other issues!",{"commenters":222,"max_depth":223,"maker_replies":32,"first_comment_mins":224,"lifespan_hours":225},55,6,27,334,[227,229,233,235,239,241,243,244,246,249,252,253,256,257,260,261,264,266,270,273,275,278,280,283,285,287,290,293,295,297,301,304,306,309,310,313,315,318,319,322,325,328,329,331,334,336,338,340,342,346,350,354,357,361,365,367,371,373,376,378,383,386,389,391,393,396,399,402,404,406,409],[84,42,42,228,85,42],"commenter\u002Fpositive\u002Fidea",[230,42,42,231,232,42],"17618691","commenter\u002Fneutral\u002Fnone","Vinnl",[213,42,42,234,11,37],"maker\u002Fpositive\u002Fidea",[236,42,37,237,238,42],"17621369","project\u002Fcritical\u002Fidea","keithnz",[103,37,37,240,104,42],"project\u002Fcritical\u002Fexecution",[216,37,42,242,11,37],"maker\u002Fneutral\u002Fexecution",[219,37,42,242,11,37],[148,18,39,245,149,42],"project\u002Fneutral\u002Fidea",[247,18,42,231,248,42],"17619058","asdojasdosadsa",[250,18,42,231,251,42],"17619069","detaro",[207,18,42,231,208,42],[254,18,42,231,255,42],"17623652","benjvmin",[174,18,42,231,175,42],[258,18,42,259,11,37],"17626083","maker\u002Fneutral\u002Fnone",[178,18,42,231,179,42],[262,18,42,231,263,42],"17620826","keth",[265,18,42,231,179,42],"17622631",[267,18,42,268,269,42],"17619608","other\u002Fneutral\u002Fnone","ljoshua",[271,18,42,268,272,42],"17619867","kilburn",[274,18,42,231,104,42],"17620434",[276,18,42,231,277,42],"17619674","Kagerjay",[279,18,42,231,104,42],"17620192",[281,18,42,231,282,42],"17620403","paulddraper",[284,18,42,231,104,42],"17620618",[286,18,42,231,282,42],"17621685",[288,18,42,231,289,42],"17623509","Whitestrake",[291,18,42,231,292,42],"17622858","westoncb",[200,18,39,294,201,42],"project\u002Fneutral\u002Fnone",[95,39,39,296,96,42],"project\u002Fmixed\u002Fexecution",[298,39,42,299,300,42],"17618471","commenter\u002Fneutral\u002Fdocs","xutopia",[107,302,37,303,108,42],4,"project\u002Fcritical\u002Fdesign",[77,36,39,305,78,42],"project\u002Fmixed\u002Fdesign",[307,36,42,308,11,37],"17619899","maker\u002Fneutral\u002Fdesign",[193,223,39,294,194,42],[311,223,42,231,312,42],"17619458","ghostbrainalpha",[314,223,42,231,194,42],"17624423",[159,316,36,317,160,42],7,"project\u002Fpositive\u002Fidea",[140,32,42,268,141,42],[320,32,42,268,321,42],"17620783","mintplant",[323,32,42,268,324,42],"17621161","pbhjpbhj",[326,32,42,268,327,42],"17621856","memco",[57,31,37,240,58,42],[330,31,42,242,11,37],"17649053",[129,332,36,333,130,42],10,"project\u002Fpositive\u002Fdesign",[335,332,42,308,11,37],"17619974",[166,337,36,317,167,42],11,[121,339,37,240,122,42],12,[341,339,42,242,11,37],"17620260",[343,344,39,245,345,42],"17622235",13,"unicornporn",[347,344,36,348,349,42],"17628074","project\u002Fpositive\u002Fexecution","rofrol",[351,352,36,317,353,42],"17618992",14,"isostatic",[114,355,37,356,115,42],15,"project\u002Fcritical\u002Fperformance",[358,355,39,359,360,42],"17622648","project\u002Fneutral\u002Fperformance","filleduchaos",[362,363,36,317,364,42],"17618721",16,"Edmond",[91,366,36,317,92,42],17,[368,366,39,369,370,42],"17618708","project\u002Fneutral\u002Fexecution","psetq",[185,372,39,245,186,42],18,[374,372,42,268,375,42],"17620046","blattimwind",[377,372,42,231,186,42],"17623497",[379,380,42,381,382,42],"17621099",19,"other\u002Fcritical\u002Fidea","lbj",[384,380,42,231,385,42],"17624635","M_Bakhtiari",[387,380,42,381,388,42],"17626763","TomMarius",[152,390,39,245,153,42],20,[73,392,36,333,74,42],21,[136,394,37,395,137,42],22,"project\u002Fcritical\u002Fnone",[397,394,42,268,398,42],"17618779","samstave",[400,394,42,268,401,42],"17619503","trumped",[403,394,37,395,137,42],"17620067",[405,394,39,294,401,42],"17630946",[407,394,42,268,408,42],"17620354","hinkley",[410,411,36,412,413,42],"17618408",23,"project\u002Fpositive\u002Fnone","agiledevers",[415,419,420],{"id":416,"t":417,"points":418,"comments":36},"16978763",1525279295,37,{"id":4,"t":12,"points":14,"comments":15},{"id":421,"t":422,"points":366,"comments":31},"18441313",1542120629,[424,429,434,439,443,448],{"id":425,"name":426,"points":427,"category":428},"17652593","canvas-sketch",295,"productivity",{"id":430,"name":431,"points":432,"category":433},"17616839","Percy",234,"languages",{"id":435,"name":436,"points":437,"category":438},"17661451","Toy",180,"games",{"id":440,"name":441,"points":442,"category":433},"17644115","Owl",156,{"id":444,"name":445,"points":446,"category":447},"17625308","Kontext",138,"learning_science",{"id":449,"name":450,"points":451,"category":20},"17662068","StyleURL",94,false,"v2",{"id":455,"name":5,"line":6,"ai":452,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":456,"top":18,"kw":457,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":458,"url":9,"mix":459,"praise":70,"objection":100,"sub":21},17618059,0.07,[24,25,26,27],"0010300000000003313350015513515330033015",[31,31,18,32],1794036568131]