{"id":22879320,"url":"https://github.com/anthinkingcoder/simple-grid","last_synced_at":"2025-06-25T06:04:59.109Z","repository":{"id":57361191,"uuid":"140702637","full_name":"anthinkingcoder/simple-grid","owner":"anthinkingcoder","description":"grid layout,support flex","archived":false,"fork":false,"pushed_at":"2018-08-08T09:06:40.000Z","size":840,"stargazers_count":24,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-14T02:04:22.514Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","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/anthinkingcoder.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":"2018-07-12T11:12:46.000Z","updated_at":"2023-11-14T11:53:23.000Z","dependencies_parsed_at":"2022-09-26T16:40:53.478Z","dependency_job_id":null,"html_url":"https://github.com/anthinkingcoder/simple-grid","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/anthinkingcoder/simple-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthinkingcoder%2Fsimple-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthinkingcoder%2Fsimple-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthinkingcoder%2Fsimple-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthinkingcoder%2Fsimple-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anthinkingcoder","download_url":"https://codeload.github.com/anthinkingcoder/simple-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthinkingcoder%2Fsimple-grid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261785961,"owners_count":23209395,"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":[],"created_at":"2024-12-13T16:38:54.220Z","updated_at":"2025-06-25T06:04:59.086Z","avatar_url":"https://github.com/anthinkingcoder.png","language":"Vue","funding_links":[],"categories":["UI布局","Components \u0026 Libraries","UI Layout","UI Layout [🔝](#readme)"],"sub_categories":["游览","UI Layout","Tour"],"readme":"# simple-grid\n\u003e a simple grid layout(Vue Component)\n\n## Installation\nuse npm\n```bash\n$ npm i simple-xgrid --save\n```\n```js\nimport Grid from 'simple-xgrid'\nimport  'simple-xgrid/dist/simple-grid.css'\nVue.use(Grid)\n\n```\nuse script\n```html\n\u003c!-- import Vue.js --\u003e\n\u003cscript src=\"//vuejs.org/js/vue.min.js\"\u003e\u003c/script\u003e\n\u003c!-- import simple-grid.js --\u003e\n\u003clink href=\"dist/simple-grid.css\"\u003e\n\u003cscript src=\"dist/simple-grid.js\"\u003e\u003c/script\u003e\n```\ndue to conflict,use script, you need change \u003ccol\u003e\u003ccol/\u003e to \u003ci-col\u003e\u003ci-col/\u003e。\n\n\n\n\n## Row Component\n### row props\n| param | description | type | default |\n| :-: | :-: | :-: | :-: |\n| gutter | Grid spacing in pixels, split equally left and right | Number | 0 |\n| type | Layout mode. Can optionally make use of flex in a modern browser. | String |  |\n| align | Vertical alignment of flex layout. You can choose between top, middle, bottom. | String |  |\n| justify | Horizontal arrangement of flex layout. You can choose between start, end, center, space-around, space-between. | String |  |\n| type | Layout mode. Can optionally make use of flex in a modern browser. | String |  |\n## Col Component\n### col props\n| param | description | type | default |\n| :-: | :-: | :-: | :-: |\n| span | Column span. Value can be between 1 and 24. | Number |  |\n| order | Grid order when using flex layout. if auto responsive, value can only 1-24. | Number |  |\n| offset | Number of cells to the left of grid spacing. No cells can be inside the grid spacing. | Number |  |\n| push | Number of cells to move to the right | Number |  |\n| pull | Number of cells to move to the left | Number |  |\n| xs | \u003c768px can be a span value or an object containing props | Number or Object |  |\n| sm | \u003e768px can be a span value or an object containing props | Number or Object |  |\n| md | ≥992px can be a span value or an object containing props | Number or Object |  |\n| lg | ≥1200px can be a span value or an object containing props | Number or Object |  |\n## examples\n[see live demo](https://jsfiddle.net/anthinkingcoder/04phqm6L)\n```html\n    \u003cRow\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003espan:4\u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003espan:4\u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003espan:4\u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003espan:4\u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003espan:4\u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003espan:4\u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cbr\u003e\n    \u003cRow :gutter=\"30\"\u003e\n      \u003cCol :span=\"8\"\u003e\n        \u003cdiv class=\"demo-col\"\u003egutter:30\u003c/div\u003e\n      \u003c/Col\u003e\n      \u003cCol :span=\"8\"\u003e\n      \u003cdiv class=\"demo-col\"\u003egutter:30\u003c/div\u003e\n      \u003c/Col\u003e\n      \u003cCol :span=\"8\"\u003e\n      \u003cdiv class=\"demo-col\"\u003egutter:30\u003c/div\u003e\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cbr\u003e\n    \u003cRow\u003e\n      \u003cCol :span=\"4\" :offset=\"4\" class=\"demo-col\"\u003eoffset:4\u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003espan:4\u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cbr\u003e\n    \u003cRow\u003e\n      \u003cCol :span=\"4\"  class=\"demo-col\"\u003ecol\u003c/Col\u003e\n      \u003cCol :span=\"8\" :push=\"4\" class=\"demo-col\"\u003epush:4\u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cbr\u003e\n    \u003cRow\u003e\n      \u003cCol :xs=\"2\" :sm=\"4\" :md=\"6\" :lg=\"8\" class=\"demo-col\"\u003eResponse-Col\u003c/Col\u003e\n      \u003cCol :xs=\"20\" :sm=\"16\" :md=\"12\" :lg=\"8\" class=\"demo-col\"\u003eResponse-Col\u003c/Col\u003e\n      \u003cCol :xs=\"2\" :sm=\"4\" :md=\"6\" :lg=\"8\" class=\"demo-col\"\u003eResponse-Col\u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cbr\u003e\n    \u003cRow\u003e\n      \u003cCol :xs=\"{ span: 5, offset: 1 }\" :lg=\"{ span: 6, offset: 2 }\" class=\"demo-col\"\u003eResponse-Col\u003c/Col\u003e\n      \u003cCol :xs=\"{ span: 11, offset: 1 }\" :lg=\"{ span: 6, offset: 2 }\" class=\"demo-col\"\u003eResponse-Col\u003c/Col\u003e\n      \u003cCol :xs=\"{ span: 5, offset: 1 }\" :lg=\"{ span: 6, offset: 2 }\" class=\"demo-col\"\u003eResponse-Col\u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cbr\u003e\n    \u003cRow  type=\"flex\" justify=\"space-between\"\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003e\n          flex\n      \u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003e\n      flex\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cbr\u003e\n    \u003cRow  type=\"flex\" justify=\"center\" align=\"middle\"\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003e\n      flex\n      \u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col demo-col-large\"\u003e\n      flex\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cbr\u003e\n    \u003cRow  type=\"flex\" justify=\"center\" align=\"top\"\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003e\n      flex\n      \u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col demo-col-large\"\u003e\n      flex\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cbr\u003e\n    \u003cRow  type=\"flex\" justify=\"center\" align=\"bottom\"\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\"\u003e\n      flex\n      \u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col demo-col-large\"\u003e\n      flex\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n    \u003cbr\u003e\n    \u003cRow  type=\"flex\"\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\" :order=\"2\"\u003e\n      order:2\n      \u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\" :order=\"1\"\u003e\n      order:1\n      \u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\" :order=\"4\"\u003e\n      order:4\n      \u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\" :order=\"5\"\u003e\n      order:5\n      \u003c/Col\u003e\n      \u003cCol :span=\"4\" class=\"demo-col\" :order=\"3\"\u003e\n      order:3\n      \u003c/Col\u003e\n    \u003c/Row\u003e\n     \u003cRow type=\"flex\"\u003e\n          \u003cCol :xs=\"{ span: 8,order:1 }\" :sm=\"{ span: 8,order:1 }\" :md=\"{ span: 8,order:2 }\" :lg=\"{ span: 8,order:2 }\" class=\"demo-col\"\u003eresponse-order-1\u003c/Col\u003e\n          \u003cCol :xs=\"{ span: 8,order:2 }\" :sm=\"{ span: 8,order:2 }\" :md=\"{ span: 8,order:1 }\" :lg=\"{ span: 8,order:1 }\" class=\"demo-col\"\u003eResponse-order-2\u003c/Col\u003e\n      \u003c/Row\u003e\n```\n## result\n![](http://ofn22jfef.bkt.clouddn.com/grid-demo.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthinkingcoder%2Fsimple-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthinkingcoder%2Fsimple-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthinkingcoder%2Fsimple-grid/lists"}