{"id":16114760,"url":"https://github.com/solarliner/preact-grid-utils","last_synced_at":"2025-04-06T08:17:26.855Z","repository":{"id":80989296,"uuid":"181978083","full_name":"SolarLiner/preact-grid-utils","owner":"SolarLiner","description":"Variable-width grid system for Preact. 300b by itself, 600b counting preact-dandy.","archived":false,"fork":false,"pushed_at":"2019-04-18T16:38:15.000Z","size":140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-12T13:54:08.433Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/SolarLiner.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-17T22:37:00.000Z","updated_at":"2019-04-18T16:38:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"dfb08af5-8d1b-4135-9216-a32919c0d0ab","html_url":"https://github.com/SolarLiner/preact-grid-utils","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolarLiner%2Fpreact-grid-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolarLiner%2Fpreact-grid-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolarLiner%2Fpreact-grid-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolarLiner%2Fpreact-grid-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SolarLiner","download_url":"https://codeload.github.com/SolarLiner/preact-grid-utils/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247451658,"owners_count":20940944,"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-10-09T20:15:41.167Z","updated_at":"2025-04-06T08:17:26.829Z","avatar_url":"https://github.com/SolarLiner.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# preact-grid-utils\n\nVariable-width grid system for Preact. 300b by itself, 600b counting preact-dandy.\n\n## Installation\n\n```bash\nnpm i preact-grid-utils\n```\n\n## Usage\n\nThe Grid utils define two components, **Grid** and **Item**.\n\n### Grid\n\n```tsx\n\u003cGrid gap=\"16px\" flow=\"row\" small={6} medium={8} large={12}\u003e{...}\u003c/Grid\u003e\n```\n\nThe Grid component is a simple wrapper over CSS Grid, with a variable-width grid. It has two optional props, which controls gap and auto-flow. Their default values are shown above.\n\nThe **variable-width** grid is similar to [Material Design Component's Layout Grid](https://www.material.io/develop/web/components/layout-grid/), it changes its number of columns depending on the width of the client device. This makes it easier to work with the grid in JSX.\n\nThe grid is configured by default with the widths as **upper limits**:\n\n- **6 columns** until **480px**\n- **8 columns** until **880px**\n- **12 columns** above.\n\nThis means for layout purposes that items of width **1,2,4,6,12** will be best and most stable. You can change number of columns at each breakpoint with the **small**, **medium**, and **large** props.\n\n### Item\n\n```tsx\n\u003cItem level={1} offset={0}\u003e{...}\u003c/Item\u003e\n```\n\nThe Item component wraps a single item in the grid. You can optionally pass a size (the _level_ prop) and an offset (the _offset_ property), but if you don't, their default values are shown above.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolarliner%2Fpreact-grid-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolarliner%2Fpreact-grid-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolarliner%2Fpreact-grid-utils/lists"}