{"id":13401015,"url":"https://github.com/paulcollett/react-masonry-css","last_synced_at":"2026-01-17T18:27:43.828Z","repository":{"id":39305869,"uuid":"97793637","full_name":"paulcollett/react-masonry-css","owner":"paulcollett","description":"React Masonry layout component powered by CSS, dependancy free","archived":false,"fork":false,"pushed_at":"2022-02-08T19:57:08.000Z","size":638,"stargazers_count":1027,"open_issues_count":29,"forks_count":67,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-19T10:42:07.691Z","etag":null,"topics":["hacktoberfest","masonry","masonry-component"],"latest_commit_sha":null,"homepage":"https://paulcollett.github.io/react-masonry-css/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paulcollett.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-20T05:24:36.000Z","updated_at":"2025-10-08T19:20:45.000Z","dependencies_parsed_at":"2022-07-12T17:50:51.293Z","dependency_job_id":null,"html_url":"https://github.com/paulcollett/react-masonry-css","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/paulcollett/react-masonry-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulcollett%2Freact-masonry-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulcollett%2Freact-masonry-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulcollett%2Freact-masonry-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulcollett%2Freact-masonry-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paulcollett","download_url":"https://codeload.github.com/paulcollett/react-masonry-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paulcollett%2Freact-masonry-css/sbom","scorecard":{"id":722961,"data":{"date":"2025-08-11","repo":{"name":"github.com/paulcollett/react-masonry-css","commit":"72dd46dc71742af15b4f3cfcdb7681e7be9f7773"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.8,"checks":[{"name":"Code-Review","score":2,"reason":"Found 6/21 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 15 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-22T11:55:23.904Z","repository_id":39305869,"created_at":"2025-08-22T11:55:23.904Z","updated_at":"2025-08-22T11:55:23.904Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28515503,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T17:57:59.192Z","status":"ssl_error","status_checked_at":"2026-01-17T17:57:52.527Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","masonry","masonry-component"],"created_at":"2024-07-30T19:00:57.881Z","updated_at":"2026-01-17T18:27:43.797Z","avatar_url":"https://github.com/paulcollett.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","JavaScript","React [🔝](#readme)"],"sub_categories":["Uncategorized"],"readme":"A Masonry component leveraging CSS and native React rendering, for fast, responsive masonry layouts\n\n![image](https://user-images.githubusercontent.com/1904774/30821174-491e9670-a1d9-11e7-8b18-250d54858c4f.png)\n\n### 😎 Why?\n\nExisting solutions like React wrapped DeSandro Masonry, while popular, don't actually leverage React's highly optimized Virtual DOM renderer and in DeSandro Masonry's case, actually renders elements twice before showing the layout. All of this is ok but we found it to lead to a slow, \"laggy\" user experience that would occasionally miss-render our layout.\n\nOur need for a simple Masonry layout that was fast, used React's Virtual DOM without needing jQuery or other dependencies led us to explore what we could do with the latest techniques using just CSS within a React Component.\n\nBetween flexbox, css columns, css grid we settled on plain ol' div's and a dab of flexbox that allows for \"fluid\" responsive layouts by default but most importantly is true to Reacts rendering lifecycle.\n\n*`react-masonry-css`* Is a React Component with a simple interface to order items into the desired columns at specified breakpoints. With minimal CSS this leads to a quick, reliable solution that also has great browser support along with rendering performance.\n\n\n#### 😄 What does this do\n* Responsive! ..always\n* IE 10+\n* No Dependencies - Which means no need for jQuery!\n* Works with existing CSS animations on your elements, like fading in on first load\n* CSS powered (Faster to render)\n* Allows for Gaps (Gutters) between elements\n\n#### 🏳️ What doesn't this do\n\n* Works with elements with different widths\n* Sorting based on height - This kills performance, so if you don't need it we're here for you\n\n### 😲 Simple Usage\n\nAdd `react-masonry-css` to your project:\n\n```bash\nnpm install react-masonry-css\n```\n\nIn your React Component...\n```jsx\nimport Masonry from 'react-masonry-css'\n\n//...\n\n\u003cMasonry\n  breakpointCols={3}\n  className=\"my-masonry-grid\"\n  columnClassName=\"my-masonry-grid_column\"\u003e\n  {/* array of JSX items */}\n\u003c/Masonry\u003e\n```\n\nAnd, CSS:\n```css\n.my-masonry-grid {\n  display: -webkit-box; /* Not needed if autoprefixing */\n  display: -ms-flexbox; /* Not needed if autoprefixing */\n  display: flex;\n  margin-left: -30px; /* gutter size offset */\n  width: auto;\n}\n.my-masonry-grid_column {\n  padding-left: 30px; /* gutter size */\n  background-clip: padding-box;\n}\n\n/* Style your items */\n.my-masonry-grid_column \u003e div { /* change div to reference your elements you put in \u003cMasonry\u003e */\n  background: grey;\n  margin-bottom: 30px;\n}\n```\n\n### Responsive Breakpoints\n\nDifferent columns can be specified by passing an object containing key's of the window widths and their value as the number of columns. To have a fallback value, use the `default` key.\n\n```jsx\n\nconst breakpointColumnsObj = {\n  default: 4,\n  1100: 3,\n  700: 2,\n  500: 1\n};\n\n//...\n\n\u003cMasonry\n  breakpointCols={breakpointColumnsObj}\n  className=\"my-masonry-grid\"\n  columnClassName=\"my-masonry-grid_column\"\n\u003e\n  \u003cdiv\u003eMy Element\u003c/div\u003e\n  \u003cdiv\u003eMy Element\u003c/div\u003e\n  \u003cdiv\u003eMy Element\u003c/div\u003e\n  \u003cdiv\u003eMy Element\u003c/div\u003e\n\u003c/Masonry\u003e\n```\n\n### Configuration Props\n\n* `breakpointCols={{default: 4, 800: 2}}` optional (defaults to 2 columns)\n* `className` for the container\n* `columnClassName` class name added to each generated column\n\n### Example Demo\n\nhttps://paulcollett.github.io/react-masonry-css/demo/\n\n### Common usage\n\n**outputting an array of items:**\n```jsx\nvar items = [\n  {id: 1, name: 'My First Item'},\n  {id: 2, name: 'Another item'},\n  {id: 3, name: 'Third Item'},\n  {id: 4, name: 'Here is the Fourth'},\n  {id: 5, name: 'High Five'}\n];\n\n// Convert array to JSX items\nitems = items.map(function(item) {\n  return \u003cdiv key={item.id}\u003e{item.name}\u003c/div\u003e\n});\n\n\u003cMasonry\n  breakpointCols={myBreakpointsAndCols}\n  className=\"my-masonry-grid\"\n  columnClassName=\"my-masonry-grid_column\"\n\u003e\n  {items}\n\u003c/Masonry\u003e\n```\n\n### Optional, Responsive gutters\nWe can add the following to the above CSS to further adjust the layout between screen sizes.\n```css\n/* Optional, different gutter size on mobile */\n@media (max-width: 800px) {\n  .my-masonry-grid {\n    margin-left: -15px; /* gutter size offset */\n  }\n  .my-masonry-grid_column {\n    padding-left: 15px; /* gutter size offset */\n  }\n  .my-masonry-grid_column \u003e div {\n    margin-bottom: 15px; /* space between items */\n  }\n}\n```\n\n### Use with Preact\nYou can use `react-masonry-css` with [Preact](https://github.com/preactjs/preact) when using `preact/compat`\n\n### DummyJS\nImprove your frontend builds with dynamic placeholder images and dummy text from [DummyJs.com](https://dummyjs.com/).\nhttps://www.npmjs.com/package/dummyjs\n\n### Suggestions \u0026 Issues\nhttps://github.com/paulcollett/react-masonry-css/issues/\n\n**Contact me direct:**\n* https://github.com/paulcollett\n* http://paulcollett.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulcollett%2Freact-masonry-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaulcollett%2Freact-masonry-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaulcollett%2Freact-masonry-css/lists"}