{"id":19739475,"url":"https://github.com/suitcss/components-grid","last_synced_at":"2026-01-11T13:29:43.203Z","repository":{"id":6526183,"uuid":"7767198","full_name":"suitcss/components-grid","owner":"suitcss","description":"Component CSS for grids","archived":false,"fork":false,"pushed_at":"2023-02-28T23:55:03.000Z","size":304,"stargazers_count":157,"open_issues_count":2,"forks_count":30,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-10-04T07:49:37.830Z","etag":null,"topics":["component-css","components-grid","css","grid"],"latest_commit_sha":null,"homepage":"http://suitcss.github.io/components-grid/test/","language":"HTML","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/suitcss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2013-01-23T03:46:41.000Z","updated_at":"2024-11-06T20:27:31.000Z","dependencies_parsed_at":"2023-07-15T01:31:40.749Z","dependency_job_id":null,"html_url":"https://github.com/suitcss/components-grid","commit_stats":{"total_commits":143,"total_committers":10,"mean_commits":14.3,"dds":"0.39160839160839156","last_synced_commit":"b2793b60741a8328ae2c6291791b3de84ea892e6"},"previous_names":["suitcss/grid"],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/suitcss/components-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fcomponents-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fcomponents-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fcomponents-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fcomponents-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suitcss","download_url":"https://codeload.github.com/suitcss/components-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suitcss%2Fcomponents-grid/sbom","scorecard":{"id":857792,"data":{"date":"2025-08-11","repo":{"name":"github.com/suitcss/components-grid","commit":"b2793b60741a8328ae2c6291791b3de84ea892e6"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"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":"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":"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":"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":"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":"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":"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":"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":"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":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"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":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"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 17 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"}},{"name":"Vulnerabilities","score":0,"reason":"56 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-pp57-mqmh-44h7","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T00:21:58.202Z","repository_id":6526183,"created_at":"2025-08-24T00:21:58.202Z","updated_at":"2025-08-24T00:21:58.202Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278687019,"owners_count":26028407,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["component-css","components-grid","css","grid"],"created_at":"2024-11-12T01:17:26.901Z","updated_at":"2025-10-06T22:10:09.929Z","avatar_url":"https://github.com/suitcss.png","language":"HTML","readme":"# SUIT CSS components-grid\n\n[![Build Status](https://travis-ci.org/suitcss/components-grid.svg?branch=master)](https://travis-ci.org/suitcss/components-grid)\n\nA CSS grid component. The grid makes use of `flexbox` and `box-sizing` to\nprovide features that float-based layouts cannot.\n\nN.B. This component relies on particular dimensions being applied to cells in\nthe grid via other classes. For example,\n[suitcss-utils-size](https://github.com/suitcss/utils-size/).\n\nRead more about [SUIT CSS](https://github.com/suitcss/suit/).\n\n## Installation\n\n* [npm](https://www.npmjs.org/package/suitcss-components-grid): `npm install suitcss-components-grid`\n* Download: [zip](https://github.com/suitcss/components-grid/releases/latest)\n\n## Features\n\n* Fluid layout.\n* Intelligent cell wrapping.\n* Evenly fill cell spacing\n* Equal height columns\n* Horizontal centering of cells.\n* Custom vertical alignment of cells (top, bottom, or middle).\n* Cell width is controlled independently of grid gutter.\n* Infinite nesting.\n\n## Available classes\n\n* `Grid`: core component\n* `Grid--alignCenter`: center-align all child cells\n* `Grid--alignRight`: right-align all child cells\n* `Grid--alignMiddle`: middle-align all child cells\n* `Grid--alignBottom`: bottom-align all child cells\n* `Grid--fill`: evenly distribute space amongst all child cells\n* `Grid--fit`: fit cells to their content\n* `Grid--equalHeight`: all child cells match height of the tallest\n* `Grid--withGutter`: adds a gutter between cells\n\n## Configurable variables\n\n* `--Grid-gutterSize`: the width of the gutter applied by the `Grid--withGutter` modifier class.\n\n## Use\n\nA simple grid is easy to create. A grid container can have any number of child\ncells. When used with `Grid--fill` space is evenly distributed without need for\nsizing utilities.\n\n**Note** Elements that are direct descendants of `Grid` will be flex items. It's\nrecommended to use an element that can easily have classes attached later if\nneeded, such as `u-sizeFill` or `u-flexJustifyCenter`\n\n```html\n\u003cdiv class=\"Grid Grid--fill Grid--withGutter\"\u003e\n  \u003cdiv\u003e\u003c!-- cell content --\u003e\u003c/div\u003e\n  \u003cdiv\u003e\u003c!-- cell content --\u003e\u003c/div\u003e\n  \u003cdiv\u003e\u003c!-- cell content --\u003e\u003c/div\u003e\n  \u003cdiv\u003e\u003c!-- cell content --\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nFor more granular control over layout make use of modifiers and sizing utilities.\n\n```html\n\u003cdiv class=\"Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom|Grid--fill|Grid--fit|Grid--equalHeight]\"\u003e\n  \u003cdiv class=\"u-size1of2 u-lg-size6of12\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"u-size1of2 u-lg-size4of12\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"u-size1of3 u-lg-size2of12\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"u-size1of3\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nFit cells to their content and allow others to fill the remaining space.\n\n```html\n\u003cdiv class=\"Grid\"\u003e\n  \u003cdiv class=\"u-sizeFit\"\u003eFit to content\u003c/div\u003e\n  \u003cdiv class=\"u-sizeFill\"\u003eTake up remaining space\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Widths and offsets\n\nCell widths and offsets can be controlled using the [responsive sizing\nutilities](https://github.com/suitcss/utils-size) and [responsive offset\nutilities](https://github.com/suitcss/utils-offset), respectively.\n\nOne limitation of creating grid gutters in the manner shown above is that it\nprevents any offset utilities applied directly to the `Grid` component from\nfunctioning as expected.\n\nGOOD:\n\n```html\n\u003cdiv class=\"Grid Grid--withGutter\"\u003e\n  \u003cdiv class=\"u-size1of2 u-before1of4 u-after1of4\"\u003e\n    {{\u003epartial}}\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nBAD:\n\n```html\n\u003cdiv class=\"Grid Grid--withGutter u-before1of4 u-after1of4\"\u003e\n  \u003cdiv\u003e\n    {{\u003epartial}}\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou can nest grids in any context, including one that uses dimension or offset\nutilities, but keep in mind that the dimensions will be relative to the\ngrid's width, and not the width of the whole application.\n\n```html\n\u003cdiv class=\"u-before1of4 u-after1of4\"\u003e\n  \u003cdiv class=\"Grid Grid--withGutter\"\u003e\n    \u003cdiv class=\"u-size1of2\"\u003e \u003c!-- 50% of the width of the Grid --\u003e\n      {{\u003epartial}}\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Testing\n\nInstall [Node](http://nodejs.org) (comes with npm).\n\n```\nnpm install\n```\n\nTo generate a build:\n\n```\nnpm run build\n```\n\nTo lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)\n\n```\nnpm run lint\n```\n\nTo generate the testing build:\n\n```\nnpm run build-test\n```\n\nTo watch the files for making changes to test:\n\n```\nnpm run watch\n```\n\nBasic visual tests are in `test/index.html`.\n\n## Browser support\n\n* Google Chrome (latest)\n* Opera (latest)\n* Firefox (latest)\n* Safari 6.2+\n* Internet Explorer 10+\n* iOS 7+\n* Android 4.4+\n* Windows Phone 8.1+\n\nRefer to the [caniuse](http://caniuse.com/) page for [flexbox](http://caniuse.com/#feat=flexbox)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuitcss%2Fcomponents-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuitcss%2Fcomponents-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuitcss%2Fcomponents-grid/lists"}