[{"data":1,"prerenderedAt":294},["ShallowReactive",2],{"project-18750561":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":35,"aspects":36,"strip":43,"post_text":46,"what":47,"said":69,"maker_in_thread":148,"shape":158,"grid":162,"attempts":257,"same_week":258,"maker_shows":184,"maker_hidden":287,"reader_version":288,"card":289},"18750561","Magic Grid","A simple JavaScript library for dynamic grid layouts","title","Show HN: Magic Grid – A simple JavaScript library for dynamic grid layouts","https:\u002F\u002Fgithub.com\u002Fe-oj\u002FMagic-Grid","github.com","e-oj",1545629478,2018,167,38,229,2155,11,"notable","languages","javascript layout library","library",[24,25,26,27],"javascript grid layout","masonry alternative","css grid","responsive grid","curious",-0.27,{"positive":31,"neutral":32,"mixed":33,"critical":34},1,12,0,7,20,{"idea":37,"performance":39,"docs":40,"design":41,"execution":42},{"positive":33,"critical":38},4,{"positive":31,"critical":33},{"positive":33,"critical":31},{"positive":33,"critical":33},{"positive":33,"critical":33},[44,33,33,44,33,31,33,44,33,44,33,33,33,33,33,33,31,44,33,45,31,31,44,33,44,33,44,31,44,33,44,31,33,33,33,44,44,31],3,5,null,{"problem":48,"audience":46,"pricing":46,"motivation":46,"time_to_build":46,"stack":59,"openness":68,"stage":68,"team_size":68},{"value":49,"source":50,"evidence":51},"Lays out grid items of varying heights without row-stretching gaps, which CSS Grid handles poorly","maker",[52,55],{"id":53,"by":11,"text":54},"18750671","When the components in a grid have different heights, a single longer or shorter component stretches the whole row or leaves unpleasant whitespace at the bottom.",{"id":56,"by":57,"text":58},"18750633","rmdashrfstar","And the reason to use this over built-in CSS grids is...",[60],{"value":61,"source":62,"evidence":63},"JavaScript","commenter",[64],{"id":65,"by":66,"text":67},"18750748","hardwaresofton","For those wondering why not just use CSS Grid -- it's not build for that[0] (see @rachelandrew's comment). It's not explained on the repo README but the author goes into it on…","unknown",{"praise":70,"objections":77,"requests":103,"questions":118,"alternatives":127},[71],{"value":72,"source":50,"evidence":73},"Much lighter than Masonry (2.3kb vs 23.5kb minified) for equal-width items",[74],{"id":75,"by":11,"text":76},"18750657","Depends on the use case. If the grid's items have varying widths then masonry is the better option. However, for a grid with equal width items, I'll definitely go with magic…",[78,90,97],{"value":79,"source":62,"evidence":80},"CSS Grid can already do this without a library",[81,82,86],{"id":56,"by":57,"text":58},{"id":83,"by":84,"text":85},"18752741","matt4077","I really don't see what's lacking with CSS Grids for equal-with items. Even accommodating different sizes, and allowing reordering for packing, works fine with just CSS.",{"id":87,"by":88,"text":89},"18750696","jahbrewski","+1 - I recently went looking for a CSS framework (I was still in the “Bootstrap” mindset), and ultimately decided on vanilla CSS grid + flexbox. If anyone is looking for a…",{"value":91,"source":62,"evidence":92},"Readme did not explain why the library is needed",[93],{"id":94,"by":95,"text":96},"18750641","thinkloop","This should have definitely been addressed in the readme",{"value":98,"source":50,"evidence":99},"Does not support items overlapping rows or columns",[100],{"id":101,"by":11,"text":102},"18753246","This doesn't and I think most grid solutions keep the items separate",[104,111],{"value":105,"source":62,"evidence":106},"Server-side rendering support",[107],{"id":108,"by":109,"text":110},"18751770","jogis","what about ssr?",{"value":112,"source":62,"evidence":113},"Interspersing elements between rows",[114],{"id":115,"by":116,"text":117},"18750948","dakom","How about a grid of equal-height items, but intersperse something between each row- can this library do that? For example, consider a bookshelf design where the books are the…",[119],{"value":120,"source":62,"evidence":121},"Why use this instead of built-in CSS grid",[122,123],{"id":56,"by":57,"text":58},{"id":124,"by":125,"text":126},"18750618","supernintendo","Neat. We use Masonry [1] although I’m not the biggest fan of it. How does this library compare? [1] https:\u002F\u002Fgithub.com\u002Fdesandro\u002Fmasonry",[128,133,141],{"value":129,"source":62,"evidence":130},"Masonry",[131,132],{"id":65,"by":66,"text":67},{"id":124,"by":125,"text":126},{"value":134,"source":62,"evidence":135},"CSS Grid",[136,137],{"id":65,"by":66,"text":67},{"id":138,"by":139,"text":140},"18752561","captain_crabs","Although I've read through the \"css grid isn't meant to do this details\", you can get fairly close to this with pure css grid, see here:…",{"value":142,"source":62,"evidence":143},"react-virtualized and react-window",[144],{"id":145,"by":146,"text":147},"18752650","sandGorgon","the state of art here is https:\u002F\u002Fgithub.com\u002Fbvaughn\u002Freact-virtualized (https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FList) and its successor,…",{"comments":149,"answered":38,"key":150},6,[151,154,157],{"id":152,"text":153},"18752945","You're right requestAnimationFrame is more efficient than using the resize listener with a delay. I'm actually working on an update to change that. It'll be fixed soon.",{"id":155,"text":156},"18751031","No, the library doesn't support that. you should be able to achieve the effect with plain html and css though.",{"id":75,"text":76},{"commenters":159,"max_depth":38,"maker_replies":149,"first_comment_mins":160,"lifespan_hours":161},28,18,24,[163,165,167,169,172,174,178,182,187,188,189,190,193,196,198,201,203,205,206,208,211,212,215,218,219,223,225,227,229,233,234,238,239,242,245,249,252,254],[65,33,44,164,66,33],"project\u002Fneutral\u002Fidea",[138,33,33,166,139,33],"commenter\u002Fneutral\u002Fidea",[168,33,33,166,66,33],"18756127",[170,33,44,164,171,33],"18752997","WhitneyLand",[173,33,33,166,66,33],"18756118",[175,31,31,176,177,33],"18750967","project\u002Fcritical\u002Fidea","humphreybc",[179,31,33,180,181,33],"18751837","other\u002Fneutral\u002Fnone","gnomodromo",[183,184,44,185,186,33],"18752874",2,"maker\u002Fneutral\u002Fperformance","Eli_P",[152,184,33,185,11,31],[115,44,44,164,116,33],[155,44,33,164,11,31],[191,38,33,180,192,33],"18751748","ThomPete",[194,38,33,180,195,33],"18751829","molszanski",[197,38,33,180,192,33],"18751897",[199,38,33,180,200,33],"18752274","mdolon",[202,38,33,180,171,33],"18753040",[145,45,31,204,146,33],"project\u002Fcritical\u002Fnone",[124,149,44,164,125,33],[75,149,33,207,11,31],"project\u002Fpositive\u002Fperformance",[209,149,45,207,210,33],"18750785","catacombs",[83,149,31,176,84,33],[213,34,31,204,214,33],"18751449","turbolent",[216,217,44,164,171,33],"18752858",8,[101,217,33,164,11,31],[220,221,44,164,222,33],"18750800",9,"sbr464",[224,221,33,164,11,31],"18750814",[56,226,44,164,57,33],10,[94,226,31,228,95,33],"project\u002Fcritical\u002Fdocs",[230,226,44,231,232,33],"18750667","project\u002Fneutral\u002Fdocs","jtmarmon",[53,226,33,164,11,31],[235,226,44,236,237,33],"18750734","project\u002Fneutral\u002Fdesign","zanny",[87,226,31,176,88,33],[240,226,33,180,241,33],"18750860","PavlovsCat",[243,226,33,180,244,33],"18751571","dfa1234",[246,226,33,247,248,33],"18751615","commenter\u002Fneutral\u002Fdocs","kilburn",[250,226,44,164,251,33],"18751579","quickthrower2",[108,18,44,253,109,33],"project\u002Fneutral\u002Fexecution",[255,32,31,176,256,33],"18751903","KenanSulayman",[],[259,264,268,273,278,283],{"id":260,"name":261,"points":262,"category":263},"18738275","curves",341,"creative",{"id":265,"name":266,"points":267,"category":20},"18755782","Wiv.js",265,{"id":269,"name":270,"points":271,"category":272},"18765482","Notable",124,"productivity",{"id":274,"name":275,"points":276,"category":277},"18725485","Serverless Analytics (Statsbot \u002F Cube.js)",114,"data",{"id":279,"name":280,"points":281,"category":282},"18754010","Inside Python Dict",111,"learning_science",{"id":284,"name":285,"points":286,"category":20},"18761359","lambdatalk FFT",100,false,"v2",{"id":290,"name":5,"line":6,"ai":287,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":29,"top":18,"kw":291,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":292,"url":9,"mix":293,"praise":72,"objection":79,"sub":21},18750561,[24,25,26,27],"30030103030000001305113030313031000331",[31,32,33,34],1793990983649]