{"id":16374819,"url":"https://github.com/jameslnewell/styled-components-grid","last_synced_at":"2025-04-05T02:08:14.898Z","repository":{"id":46948096,"uuid":"81254679","full_name":"jameslnewell/styled-components-grid","owner":"jameslnewell","description":"A responsive grid components for styled-components.","archived":false,"fork":false,"pushed_at":"2023-07-15T07:47:38.000Z","size":3055,"stargazers_count":220,"open_issues_count":28,"forks_count":14,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-12T03:18:25.391Z","etag":null,"topics":["grid","react","responsive-grid","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/jameslnewell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-02-07T21:11:25.000Z","updated_at":"2024-06-11T15:25:08.000Z","dependencies_parsed_at":"2023-11-27T03:40:43.216Z","dependency_job_id":"e2234dc6-6021-473f-a4f3-7bc26f127bda","html_url":"https://github.com/jameslnewell/styled-components-grid","commit_stats":{"total_commits":50,"total_committers":8,"mean_commits":6.25,"dds":"0.42000000000000004","last_synced_commit":"c2001cde69bd7969cdd9f4548c8737e4eb2b9d1e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jameslnewell","download_url":"https://codeload.github.com/jameslnewell/styled-components-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276164,"owners_count":20912288,"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":["grid","react","responsive-grid","styled-components"],"created_at":"2024-10-11T03:18:31.954Z","updated_at":"2025-04-05T02:08:14.883Z","avatar_url":"https://github.com/jameslnewell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# styled-components-grid\n\n![npm](https://img.shields.io/npm/v/styled-components-grid.svg) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/styled-components-grid.svg) ![npm](https://img.shields.io/npm/dm/styled-components-grid.svg) [![Build Status](https://travis-ci.org/jameslnewell/styled-components-grid.svg?branch=master)](https://travis-ci.org/jameslnewell/styled-components-grid)\n\nResponsive grid components for `styled-components` 💅.\n\n\u003e [Change log](https://github.com/jameslnewell/styled-components-grid/blob/master/CHANGELOG.md)\n\n\u003e Have a look 👀 at [`styled-components-breakpoint`](https://github.com/jameslnewell/styled-components-breakpoint) and [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) which work well with this package.\n\n## Installation\n\n```bash\nyarn add styled-components styled-components-grid\n```\n\n## Usage\n\n\u003e [Examples](https://jameslnewell.github.io/styled-components-grid/)\n\n### Using the default breakpoints\n\n```js\nimport React from 'react';\nimport Grid from 'styled-components-grid';\n\n\u003cGrid\u003e\n  \u003cGrid.Unit size={1 / 6}\u003eAwesome!\u003c/Grid.Unit\u003e\n  \u003cGrid.Unit size={1 / 3}\u003eAmazing!\u003c/Grid.Unit\u003e\n  \u003cGrid.Unit size={{ tablet: 1 / 2, desktop: 1 / 4 }}\u003eOut of this world!\u003c/Grid.Unit\u003e\n\u003c/Grid\u003e;\n```\n\n### Using custom breakpoints\n\nYou can customise the default breakpoints. If you would like to use the same breakpoints as [Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints), you can do so like this:\n\n```js\nimport React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport Grid from 'styled-components-grid';\n\nconst theme = {\n  breakpoints: {\n    xs: 0,\n    sm: 576,\n    md: 768,\n    lg: 992,\n    xl: 1200\n  }\n};\n\n\u003cThemeProvider theme={theme}\u003e\n  \u003cGrid\u003e\n    \u003cGrid.Unit size={1 / 6}\u003eAwesome!\u003c/Grid.Unit\u003e\n    \u003cGrid.Unit size={1 / 3}\u003eAmazing!\u003c/Grid.Unit\u003e\n    \u003cGrid.Unit size={{ lg: 1 / 5 }}\u003eOut of this world!\u003c/Grid.Unit\u003e\n  \u003c/Grid\u003e\n\u003c/ThemeProvider\u003e;\n```\n\n### Using the mixins\n\n```js\nimport React from 'react';\nimport styled from 'styled-components';\nimport { grid } from 'styled-components-grid';\n\nconst FeaturePanel = styled`\n  ${grid({})}\n`;\n\nconst Feature = styled`\n  ${grid.unit({ size: { tablet: 1 / 3 } })}\n`;\n\n\u003cFeaturePanel\u003e\n  \u003cFeature\u003eAwesome!\u003c/Feature\u003e\n  \u003cFeature\u003eAmazing!\u003c/Feature\u003e\n  \u003cFeature\u003eOut of this world!\u003c/Feature\u003e\n\u003c/FeaturePanel\u003e;\n```\n\n## Components\n\n### \u0026lt;Grid/\u0026gt;\n\n#### horizontalAlign\n\nControls the horizontal alignment of grid units.\n\nA `string` equal to one of `left|right|center|justify|justify-center` OR an `object` where the values are `string`s equal to one of `left|right|center|justify|justify-center` for each desired breakpoint. Defaults to `left`.\n\n#### verticalAlign\n\nControls the vertical alignment of grid units.\n\nA `string` equal to one of `top|bottom|center|stretch` OR an `object` where the values are `string`s equal to one of `top|bottom|center|stretch` for each desired breakpoint. Defaults to `stretch`.\n\n### reverse\n\nReverse the order of the grid units.\n\nA `boolean` OR an `object` where the values are `booleans`s for each desired breakpoint. Defaults to `false`.\n\n### wrap\n\nWhether the grid units should wrap across multiple lines or a single line.\n\nA `boolean` OR an `object` where the values are `booleans`s for each desired breakpoint. Defaults to `true`.\n\n#### component\n\nThe component to render the styles on.\n\nOptional. A `string` or valid React component. Defaults to `div`.\n\n### \u0026lt;Grid.Unit/\u0026gt;\n\n#### size\n\nControls the width of the grid unit.\n\nA `number` between `0` and `1` OR a `string` of `min` or `max` OR an `object` where the values are a `number` between `0` and `1` OR a `string` of `min` or `max` for each desired breakpoint.\n\n#### visible\n\nControls whether the grid unit is visible.\n\nA `boolean` OR an `object` where the values are `booleans`s for each desired breakpoint. Defaults to `true`.\n\n#### component\n\nThe component to render the styles on.\n\nOptional. A `string` or valid React component. Defaults to `div`.\n\n## Mixins\n\n### grid(opts)\n\nApply grid styles.\n\n* `halign`\n* `valign`\n* `wrap`\n* `reverse`\n\n### grid.unit(opts)\n\nApply grid unit styles.\n\n* `size`\n* `visible`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Fstyled-components-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjameslnewell%2Fstyled-components-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Fstyled-components-grid/lists"}