{"id":13394088,"url":"https://github.com/1000ch/grd","last_synced_at":"2025-05-15T01:06:09.321Z","repository":{"id":16672446,"uuid":"19428231","full_name":"1000ch/grd","owner":"1000ch","description":"A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).","archived":false,"fork":false,"pushed_at":"2023-08-11T21:53:59.000Z","size":296,"stargazers_count":2201,"open_issues_count":10,"forks_count":105,"subscribers_count":40,"default_branch":"main","last_synced_at":"2025-05-13T21:53:29.854Z","etag":null,"topics":["css","flexbox","grid","grid-layout"],"latest_commit_sha":null,"homepage":"https://1000ch.github.io/grd/","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/1000ch.png","metadata":{"files":{"readme":"readme.markdown","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,"governance":null}},"created_at":"2014-05-04T14:29:53.000Z","updated_at":"2025-05-03T03:26:41.000Z","dependencies_parsed_at":"2022-07-21T21:47:26.733Z","dependency_job_id":"6ce3be02-8b96-4d05-afc8-eebb2901774e","html_url":"https://github.com/1000ch/grd","commit_stats":{"total_commits":69,"total_committers":5,"mean_commits":13.8,"dds":"0.23188405797101452","last_synced_commit":"4f07ddd69267246860c20c0fc17213b25abc502c"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1000ch%2Fgrd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1000ch%2Fgrd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1000ch%2Fgrd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1000ch%2Fgrd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/1000ch","download_url":"https://codeload.github.com/1000ch/grd/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254043250,"owners_count":22004912,"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","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":["css","flexbox","grid","grid-layout"],"created_at":"2024-07-30T17:01:08.562Z","updated_at":"2025-05-15T01:06:09.261Z","avatar_url":"https://github.com/1000ch.png","language":"HTML","funding_links":[],"categories":["HTML","css"],"sub_categories":[],"readme":"# grd ![\"\"](https://badge-size.herokuapp.com/1000ch/grd/main/grd.min.css.svg?compression=gzip)\n\n![\"\"](./logo.png)\n\nA CSS grid framework using Flexbox.\n\n- **Simple**: Provides just 2 base classes `Grid` and `Cell` and some modifiers.\n- **Light-weight**: Only 321 bytes (Gzipped).\n- **Flexible**: Easy to use Flexbox features.\n\n[Flexible Box Layout Module](http://caniuse.com/#search=flex) and [`calc()` as CSS unit value](http://caniuse.com/#search=calc) used in Grd are available on modern browsers (Chrome, Firefox, Safari, Opera, Edge and IE11).\n\nIf you want to use Grd with Sass, you can choose [grd-sass](https://github.com/1000ch/grd-sass) as Sass port.\n\n## Install\n\n```bash\nnpm install grd\n```\n\n## Usage\n\n```html\n\u003cdiv class=\"Grid\"\u003e\n  \u003cdiv class=\"Cell -3of12\"\u003e3of12\u003c/div\u003e\n  \u003cdiv class=\"Cell -9of12\"\u003e9of12\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### `Grid` modifiers\n\n| Vertical layout | Description |\n|---|---|\n| `-top` | Pull items to top |\n| `-middle` |  Pull items to middle |\n| `-bottom` |  Pull items to bottom |\n| `-stretch` | Stretch items |\n| `-baseline` |  Pull items to baseline |\n\n| Horizontal layout | Description |\n|---|---|\n| `-left` | Layout items to left |\n| `-center` | Layout items To center |\n| `-right` | Layout items to right |\n| `-between` | Add spaces between items |\n| `-around` | Add spaces around items |\n\n### `Cell` modifiers\n\n| Cell width | Description |\n|---|---|\n| `-fill` | Set item width to left |\n| `-1of12` | Set item width to 8.3% |\n| `-2of12` | Set item width to 16.7% |\n| `-3of12` | Set item width to 25% |\n| `-4of12` | Set item width to 33% |\n| `-5of12` | Set item width to 41.7% |\n| `-6of12` | Set item width to 50% |\n| `-7of12` | Set item width to 58.3% |\n| `-8of12` | Set item width to 66.7% |\n| `-9of12` | Set item width to 75% |\n| `-10of12` | Set item width to 83.3% |\n| `-11of12` | Set item width to 91.7% |\n| `-12of12` | Set item width to 100% |\n\n## License\n\n[MIT](https://1000ch.mit-license.org) © [Shogo Sensui](https://github.com/1000ch)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1000ch%2Fgrd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F1000ch%2Fgrd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1000ch%2Fgrd/lists"}