{"id":26663238,"url":"https://github.com/startpolymer/s-grid","last_synced_at":"2025-11-08T05:03:19.317Z","repository":{"id":74217498,"uuid":"82704867","full_name":"StartPolymer/s-grid","owner":"StartPolymer","description":"s-grid is a helper class useful for creating responsive, fluid grid layouts using CSS Custom Properties.","archived":false,"fork":false,"pushed_at":"2017-02-22T23:00:51.000Z","size":28,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-31T00:26:59.406Z","etag":null,"topics":["css-custom-properties","css-grid","css-variables","grid","polymer","polymer-styles"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StartPolymer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-02-21T16:57:25.000Z","updated_at":"2020-03-24T22:58:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"baef5353-9fba-4b30-9f71-4418ba29b13b","html_url":"https://github.com/StartPolymer/s-grid","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/StartPolymer/s-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StartPolymer%2Fs-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StartPolymer%2Fs-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StartPolymer%2Fs-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StartPolymer%2Fs-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StartPolymer","download_url":"https://codeload.github.com/StartPolymer/s-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StartPolymer%2Fs-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274609465,"owners_count":25316621,"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-09-11T02:00:13.660Z","response_time":74,"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":["css-custom-properties","css-grid","css-variables","grid","polymer","polymer-styles"],"created_at":"2025-03-25T14:27:22.885Z","updated_at":"2025-11-08T05:03:19.271Z","avatar_url":"https://github.com/StartPolymer.png","language":"HTML","readme":"[![Published on webcomponents.org][webcomponents-image]][webcomponents-url]\n\n##\u0026lt;s-grid\u0026gt;\n\n`s-grid` is a helper class useful for creating responsive, fluid grid layouts using CSS Custom Properties.\nBecause custom properties can be defined inside a `@media` rule, you can customize the grid layout\nfor different responsive breakpoints.\n\n`s-grid` is up-to-date fork of [`app-grid`](https://github.com/PolymerElements/app-layout/tree/master/app-grid)\n\n## New Features\n\n- Grids can be nested using 4 class modifiers `s-grid-1`, `s-grid-2`, `s-grid-3`, `s-grid-4`\n- CSS properties `--s-grid-1-direction` - `--s-grid-4-direction` for direction of an flexible items using `flex-direction` property\n\n## Demo\n\n- [Reflow grid layout](https://webcomponents.org/element/StartPolymer/s-grid/demo/demo/material-design-reflow-grid.html) based on [Material Design Responsive Reflow pattern](https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-patterns)\n- [Aspect ratios](https://webcomponents.org/element/StartPolymer/s-grid/demo/demo/aspect-ratio.html)\n- [All demos][webcomponents-demo]\n\n## Examples\n\nImport `s-grid-style.html`, `s-grid-1-style.html` and include `s-grid-style`, `s-grid-1-style` in the style of an element's definition.\nThen, add the class `s-grid`, `s-grid-1` to a container such as `ul` or `div`:\n\n```html\n\u003ctemplate\u003e\n  \u003cstyle include=\"s-grid-style s-grid-1-style\"\u003e\n\n    :host {\n      --s-grid-1-items: 3;\n      --s-grid-1-item-height: 100px;\n    }\n\n    ul {\n      padding: 0;\n      list-style: none;\n    }\n\n    .item {\n      background-color: white;\n    }\n\n    @media (max-width: 640px) {\n      :host {\n        --s-grid-1-items: 1;\n      }\n    }\n\n  \u003c/style\u003e\n  \u003cul class=\"s-grid s-grid-1\"\u003e\n    \u003cli class=\"item\"\u003e1\u003c/li\u003e\n    \u003cli class=\"item\"\u003e2\u003c/li\u003e\n    \u003cli class=\"item\"\u003e3\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n```\n\nIn this example, the grid  will take 3 columns per row and only 1 column if the viewport width is\nsmaller than 640px.\n\n### Expandible items\n\nIn many cases, it's useful to expand an item more than 1 column. To achieve this type of layout,\nyou can specify the number of columns the item should expand to by setting the custom property\n`--s-grid-1-expandible-item-items`. To indicate which item should expand, apply the mixin\n`--s-grid-1-expandible-item` to a rule with a selector to the item. For example:\n\n```html\n\u003ctemplate\u003e\n  \u003cstyle include=\"s-grid-style s-grid-1-style\"\u003e\n    :host {\n      --s-grid-1-items: 3;\n      --s-grid-1-item-height: 100px;\n      --s-grid-1-expandible-item-items: 3;\n    }\n\n    ul {\n      padding: 0;\n      list-style: none;\n    }\n\n    /* Only the first item should expand */\n    .item:first-child {\n      @apply(--s-grid-1-expandible-item);\n    }\n  \u003c/style\u003e\n\u003c/template\u003e\n```\n\n### Preserving the aspect ratio\n\nWhen the size of a grid item should preserve the aspect ratio, you can add the `has-aspect-ratio`\nattribute to the element with the class `s-grid`. Now, every item element becomes a wrapper around\nthe item content. For example:\n\n```html\n\u003ctemplate\u003e\n  \u003cstyle include=\"s-grid-style s-grid-1-style\"\u003e\n\n    :host {\n      --s-grid-1-items: 3;\n      /* 50% the width of the item is equivalent to 2:1 aspect ratio*/\n      --s-grid-1-item-height: 50%;\n    }\n\n    ul {\n      padding: 0;\n      list-style: none;\n    }\n\n    .item {\n      background-color: white;\n    }\n\n  \u003c/style\u003e\n  \u003cul class=\"s-grid s-grid-1\" has-aspect-ratio\u003e\n    \u003cli class=\"item\"\u003e\n      \u003cdiv\u003eitem 1\u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli class=\"item\"\u003e\n      \u003cdiv\u003eitem 2\u003c/div\u003e\n    \u003c/li\u003e\n    \u003cli class=\"item\"\u003e\n      \u003cdiv\u003eitem 3\u003c/div\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n```\n\n### Styling\n\nCustom property                                             | Description                                                | Default\n------------------------------------------------------------|------------------------------------------------------------|------------------\n`--s-grid-1-direction` - `--s-grid-4-direction`             | Direction of an flexible items.                            | row\n`--s-grid-1-gutter` - `--s-grid-4-gutter`                   | The space between two items.                               | 0px\n`--s-grid-1-items` - `--s-grid-4-items`                     | The number of items per row or column.                     | 1\n`--s-grid-1-item-height` - `--s-grid-4-item-height`         | The height of the items.                                   | auto\n`--s-grid-1-expandible-item-items` - `--s-grid-4-expandible-item-items` | The number of items an expandible item should expand to. | 1\n`--s-grid-1-total-right-gutter` - `--s-grid-4-total-right-gutter`       | Total right gutter(margin) of items. | var(--s-grid-1-gutter) * var(--s-grid-1-items)\n\n## Installation\n\n`bower i StartPolymer/s-grid -S`\n\n## License\n\nMIT: [StartPolymer/license](https://github.com/StartPolymer/license)\n\n\n[webcomponents-image]: https://img.shields.io/badge/webcomponents.org-published-blue.svg\n[webcomponents-url]: https://webcomponents.org/element/StartPolymer/s-grid\n[webcomponents-demo]: https://webcomponents.org/element/StartPolymer/s-grid/demo/demo/index.html\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstartpolymer%2Fs-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstartpolymer%2Fs-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstartpolymer%2Fs-grid/lists"}