{"id":42830291,"url":"https://github.com/wide/styles-grid","last_synced_at":"2026-01-30T11:26:46.906Z","repository":{"id":49263336,"uuid":"291986666","full_name":"wide/styles-grid","owner":"wide","description":"SCSS Grid","archived":false,"fork":false,"pushed_at":"2021-06-21T11:48:57.000Z","size":19,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-10-04T06:53:42.257Z","etag":null,"topics":["modulus","styles"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/wide.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}},"created_at":"2020-09-01T12:05:09.000Z","updated_at":"2022-03-16T16:38:24.000Z","dependencies_parsed_at":"2022-08-29T11:01:49.021Z","dependency_job_id":null,"html_url":"https://github.com/wide/styles-grid","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/wide/styles-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wide","download_url":"https://codeload.github.com/wide/styles-grid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28911821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T08:15:08.179Z","status":"ssl_error","status_checked_at":"2026-01-30T08:14:31.507Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["modulus","styles"],"created_at":"2026-01-30T11:26:46.379Z","updated_at":"2026-01-30T11:26:46.901Z","avatar_url":"https://github.com/wide.png","language":"SCSS","readme":"# SCSS UI Grid\n\n## Install\n\n```\nnpm install @wide/styles-grid --save\n```\n\n## Note\n\nPlease, note that more you add helper mixins, more your CSS compiled file will be heavy.  \n\nSo add helpers you really need.\n\n## Usage\n\n- [Variables](#variables)\n- [container](#container)\n- [row](#row)\n- [col](#col)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Variables\n\nAll those variables could be customized depending on what you need in your `variables.scss` file.  \nHere are the default values.\n\n#### \u003ca name=\"variables-grid-prefix\"\u003e\u003c/a\u003e`$grid-prefix`\n\nPrefix for all grid classes.\n\n```scss\n$grid-prefix: '' !default;\n```\n\n#### \u003ca name=\"variables-grid-prefix\"\u003e\u003c/a\u003e`$grid-prefix`\n\nGrid gutter length. **Must be a pixel value.**\n\n```scss\n$grid-gutter: 15px !default;\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## container\n\n- [Variables](#container-variables)\n  - [`$containers`](#container-variables-containers)\n  - [`$containers-prefix`](#container-variables-containers-prefix)\n- [Mixins](#container-mixins)\n  - [`container-helper()`](#container-helper)\n  - [`container-helper-with-bp()`](#container-helper-with-bp)\n  - [`container()`](#container-container)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"container-variables\"\u003e\u003c/a\u003eVariables\n\nAll those variables could be customized depending on what you need in your `variables.scss` file.  \nHere are the default values.\n\n#### \u003ca name=\"container-variables-containers\"\u003e\u003c/a\u003e`$containers`\n\nContainer's breakpoints list.\n\n```scss\n$containers: (\n    'xs': (\n        max-width: 320px\n    ),\n    'sm': (\n        max-width: 540px\n    ),\n    'md': (\n        max-width: 720px\n    ),\n    'lg': (\n        max-width: 960px\n    ),\n    'xl': (\n        max-width: 1140px\n    ),\n    'xxl': (\n        max-width: 1540px\n    )\n) !default;\n```\n\n#### \u003ca name=\"container-variables-containers-prefix\"\u003e\u003c/a\u003e`$containers-prefix`\n\nContainer classes prefix.\n\n```scss\n$containers-prefix: $grid-prefix !default;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"container-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"container-helper\"\u003e\u003c/a\u003e`container-helper()`\n\nSet all container classes.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.container-helper;\n```\n\n##### Output\n```css\n.container,\n.container-fluid {\n    width: 100%;\n    margin-right: auto;\n    margin-left: auto;\n    padding-right: 0.9375rem;\n    padding-left: 0.9375rem;\n}\n```\n\n#### \u003ca name=\"container-helper-with-bp\"\u003e\u003c/a\u003e`container-helper-with-bp()`\n\nSet all container classes with breakpoints media queries.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.container-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) {\n    .container, .container\\@xs {\n        max-width: 320px;\n    }\n}\n@media (min-width: 36em) {\n    .container, .container\\@xs, .container\\@sm {\n        max-width: 540px;\n    }\n}\n@media (min-width: 48em) {\n    .container, .container\\@xs, .container\\@sm, .container\\@md {\n        max-width: 720px;\n    }\n}\n@media (min-width: 64em) {\n    .container, .container\\@xs, .container\\@sm, .container\\@md, .container\\@lg {\n        max-width: 960px;\n    }\n}\n@media (min-width: 75em) {\n    .container, .container\\@xs, .container\\@sm, .container\\@md, .container\\@lg, .container\\@xl {\n        max-width: 1140px;\n    }\n}\n@media (min-width: 100em) {\n    .container, .container\\@xs, .container\\@sm, .container\\@md, .container\\@lg, .container\\@xl, .container\\@xxl {\n        max-width: 1540px;\n    }\n}\n.container\\@xs, .container\\@sm, .container\\@md, .container\\@lg, .container\\@xl, .container\\@xxl, .container-fluid {\n    width: 100%;\n    margin-right: auto;\n    margin-left: auto;\n    padding-right: 0.9375rem;\n    padding-left: 0.9375rem;\n}\n```\n\n#### \u003ca name=\"container-container\"\u003e\u003c/a\u003e`container()`\n\nGrid `container` entry point  \nCombine both [`container-helper`](#container-helper) and [`container-helper-with-bp`](#container-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.container;\n```\n\n###### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `container-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`container-helper`](#container-helper) and [`container-helper-with-bp`](#container-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## row\n\n- [Variables](#row-variables)\n  - [`$rows-cols-max-columns`](#row-variables-rows-cols-max-columns)\n  - [`$rows-prefix`](#row-variables-rows-prefix)\n- [Mixins](#row-mixins)\n  - [`row-helper()`](#row-helper)\n  - [`row-helper-with-bp()`](#row-helper-with-bp)\n  - [`row()`](#row-row)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"row-variables\"\u003e\u003c/a\u003eVariables\n\nAll those variables could be customized depending on what you need in your `variables.scss` file.  \nHere are the default values.\n\n#### \u003ca name=\"row-variables-rows-cols-max-columns\"\u003e\u003c/a\u003e`$rows-cols-max-columns`\n\nMax columns for basic provided `.row-col-{col}@{breakpoint}` classes.\n\n```scss\n$rows-cols-max-columns: 6 !default;\n```\n\n#### \u003ca name=\"row-variables-rows-prefix\"\u003e\u003c/a\u003e`$rows-prefix`\nRow classes prefix.\n\n```scss\n$rows-prefix: $grid-prefix !default;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"row-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"row-helper\"\u003e\u003c/a\u003e`row-helper()`\n\nSet row class.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.row-helper;\n```\n\n##### Output\n```css\n.row {\n    display: flex;\n    flex-wrap: wrap;\n    margin-right: -0.9375rem;\n    margin-left: -0.9375rem;\n}\n```\n\n#### \u003ca name=\"row-cols-helper\"\u003e\u003c/a\u003e`row-cols-helper()`\n\nSet all row-cols classes from the [`$rows-cols-max-columns`](#row-variables-rows-cols-max-columns) variable.  \nSpecify on a parent element (e.g., `.row`) to force immediate children into NN numberof columns.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.row-cols-helper;\n```\n\n##### Output\n```css\n.row-cols-1 \u003e *,\n.row-cols-1 \u003e .col {\n    flex: 0 0 100%;\n    max-width: 100%;\n}\n\n.row-cols-2 \u003e *,\n.row-cols-2 \u003e .col {\n    flex: 0 0 50%;\n    max-width: 50%;\n}\n\n.row-cols-3 \u003e *,\n.row-cols-3 \u003e .col {\n    flex: 0 0 33.3333333333%;\n    max-width: 33.3333333333%;\n}\n\n.row-cols-4 \u003e *,\n.row-cols-4 \u003e .col {\n    flex: 0 0 25%;\n    max-width: 25%;\n}\n\n.row-cols-5 \u003e *,\n.row-cols-5 \u003e .col {\n    flex: 0 0 20%;\n    max-width: 20%;\n}\n\n.row-cols-6 \u003e *,\n.row-cols-6 \u003e .col {\n    flex: 0 0 16.6666666667%;\n    max-width: 16.6666666667%;\n}\n```\n\n#### \u003ca name=\"row-cols-helper-with-bp\"\u003e\u003c/a\u003e`row-cols-helper-with-bp()`\n\nSet all row-cols classes with breakpoints media queries.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.row-cols-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .row-cols-1\\@xs-only \u003e *,\n    .row-cols-1\\@xs-only \u003e .col {\n        flex: 0 0 100%;\n        max-width: 100%;\n    }\n\n    .row-cols-2\\@xs-only \u003e *,\n    .row-cols-2\\@xs-only \u003e .col {\n        flex: 0 0 50%;\n        max-width: 50%;\n    }\n\n    .row-cols-3\\@xs-only \u003e *,\n    .row-cols-3\\@xs-only \u003e .col {\n        flex: 0 0 33.3333333333%;\n        max-width: 33.3333333333%;\n    }\n\n    .row-cols-4\\@xs-only \u003e *,\n    .row-cols-4\\@xs-only \u003e .col {\n        flex: 0 0 25%;\n        max-width: 25%;\n    }\n\n    .row-cols-5\\@xs-only \u003e *,\n    .row-cols-5\\@xs-only \u003e .col {\n        flex: 0 0 20%;\n        max-width: 20%;\n    }\n\n    .row-cols-6\\@xs-only \u003e *,\n    .row-cols-6\\@xs-only \u003e .col {\n        flex: 0 0 16.6666666667%;\n        max-width: 16.6666666667%;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .row-cols-1\\@sm \u003e *\n     * .row-cols-1\\@sm \u003e .col\n     * .row-cols-2\\@sm \u003e *\n     * .row-cols-2\\@sm \u003e .col\n     * .row-cols-3\\@sm \u003e *\n     * .row-cols-3\\@sm \u003e .col\n     * .row-cols-4\\@sm \u003e *\n     * .row-cols-4\\@sm \u003e .col\n     * .row-cols-5\\@sm \u003e *\n     * .row-cols-5\\@sm \u003e .col\n     * .row-cols-6\\@sm \u003e *\n     * .row-cols-6\\@sm \u003e .col\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .row-cols-1\\@sm-only \u003e *\n     * .row-cols-1\\@sm-only \u003e .col\n     * .row-cols-2\\@sm-only \u003e *\n     * .row-cols-2\\@sm-only \u003e .col\n     * .row-cols-3\\@sm-only \u003e *\n     * .row-cols-3\\@sm-only \u003e .col\n     * .row-cols-4\\@sm-only \u003e *\n     * .row-cols-4\\@sm-only \u003e .col\n     * .row-cols-5\\@sm-only \u003e *\n     * .row-cols-5\\@sm-only \u003e .col\n     * .row-cols-6\\@sm-only \u003e *\n     * .row-cols-6\\@sm-only \u003e .col\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .row-cols-1\\@md \u003e *\n     * .row-cols-1\\@md \u003e .col\n     * .row-cols-2\\@md \u003e *\n     * .row-cols-2\\@md \u003e .col\n     * .row-cols-3\\@md \u003e *\n     * .row-cols-3\\@md \u003e .col\n     * .row-cols-4\\@md \u003e *\n     * .row-cols-4\\@md \u003e .col\n     * .row-cols-5\\@md \u003e *\n     * .row-cols-5\\@md \u003e .col\n     * .row-cols-6\\@md \u003e *\n     * .row-cols-6\\@md \u003e .col\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .row-cols-1\\@md-only \u003e *\n     * .row-cols-1\\@md-only \u003e .col\n     * .row-cols-2\\@md-only \u003e *\n     * .row-cols-2\\@md-only \u003e .col\n     * .row-cols-3\\@md-only \u003e *\n     * .row-cols-3\\@md-only \u003e .col\n     * .row-cols-4\\@md-only \u003e *\n     * .row-cols-4\\@md-only \u003e .col\n     * .row-cols-5\\@md-only \u003e *\n     * .row-cols-5\\@md-only \u003e .col\n     * .row-cols-6\\@md-only \u003e *\n     * .row-cols-6\\@md-only \u003e .col\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .row-cols-1\\@lg \u003e *\n     * .row-cols-1\\@lg \u003e .col\n     * .row-cols-2\\@lg \u003e *\n     * .row-cols-2\\@lg \u003e .col\n     * .row-cols-3\\@lg \u003e *\n     * .row-cols-3\\@lg \u003e .col\n     * .row-cols-4\\@lg \u003e *\n     * .row-cols-4\\@lg \u003e .col\n     * .row-cols-5\\@lg \u003e *\n     * .row-cols-5\\@lg \u003e .col\n     * .row-cols-6\\@lg \u003e *\n     * .row-cols-6\\@lg \u003e .col\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .row-cols-1\\@lg-only \u003e *\n     * .row-cols-1\\@lg-only \u003e .col\n     * .row-cols-2\\@lg-only \u003e *\n     * .row-cols-2\\@lg-only \u003e .col\n     * .row-cols-3\\@lg-only \u003e *\n     * .row-cols-3\\@lg-only \u003e .col\n     * .row-cols-4\\@lg-only \u003e *\n     * .row-cols-4\\@lg-only \u003e .col\n     * .row-cols-5\\@lg-only \u003e *\n     * .row-cols-5\\@lg-only \u003e .col\n     * .row-cols-6\\@lg-only \u003e *\n     * .row-cols-6\\@lg-only \u003e .col\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .row-cols-1\\@xl \u003e *\n     * .row-cols-1\\@xl \u003e .col\n     * .row-cols-2\\@xl \u003e *\n     * .row-cols-2\\@xl \u003e .col\n     * .row-cols-3\\@xl \u003e *\n     * .row-cols-3\\@xl \u003e .col\n     * .row-cols-4\\@xl \u003e *\n     * .row-cols-4\\@xl \u003e .col\n     * .row-cols-5\\@xl \u003e *\n     * .row-cols-5\\@xl \u003e .col\n     * .row-cols-6\\@xl \u003e *\n     * .row-cols-6\\@xl \u003e .col\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .row-cols-1\\@xl-only \u003e *\n     * .row-cols-1\\@xl-only \u003e .col\n     * .row-cols-2\\@xl-only \u003e *\n     * .row-cols-2\\@xl-only \u003e .col\n     * .row-cols-3\\@xl-only \u003e *\n     * .row-cols-3\\@xl-only \u003e .col\n     * .row-cols-4\\@xl-only \u003e *\n     * .row-cols-4\\@xl-only \u003e .col\n     * .row-cols-5\\@xl-only \u003e *\n     * .row-cols-5\\@xl-only \u003e .col\n     * .row-cols-6\\@xl-only \u003e *\n     * .row-cols-6\\@xl-only \u003e .col\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .row-cols-1\\@xxl \u003e *\n     * .row-cols-1\\@xxl \u003e .col\n     * .row-cols-2\\@xxl \u003e *\n     * .row-cols-2\\@xxl \u003e .col\n     * .row-cols-3\\@xxl \u003e *\n     * .row-cols-3\\@xxl \u003e .col\n     * .row-cols-4\\@xxl \u003e *\n     * .row-cols-4\\@xxl \u003e .col\n     * .row-cols-5\\@xxl \u003e *\n     * .row-cols-5\\@xxl \u003e .col\n     * .row-cols-6\\@xxl \u003e *\n     * .row-cols-6\\@xxl \u003e .col\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .row-cols-1\\@xxl-only \u003e *\n     * .row-cols-1\\@xxl-only \u003e .col\n     * .row-cols-2\\@xxl-only \u003e *\n     * .row-cols-2\\@xxl-only \u003e .col\n     * .row-cols-3\\@xxl-only \u003e *\n     * .row-cols-3\\@xxl-only \u003e .col\n     * .row-cols-4\\@xxl-only \u003e *\n     * .row-cols-4\\@xxl-only \u003e .col\n     * .row-cols-5\\@xxl-only \u003e *\n     * .row-cols-5\\@xxl-only \u003e .col\n     * .row-cols-6\\@xxl-only \u003e *\n     * .row-cols-6\\@xxl-only \u003e .col\n     */\n}\n```\n\n#### \u003ca name=\"row-row\"\u003e\u003c/a\u003e`row()`\n\nGrid `row` entry point  \nCombine [`row-helper`](#row-helper), [`row-cols-helper`](#row-cols-helper) and [`row-cols-helper-with-bp`](#row-cols-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.row;\n```\n\n###### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `row-cols-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`row-helper`](#row-helper), [`row-cols-helper`](#row-cols-helper) and [`row-cols-helper-with-bp`](#row-cols-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n## col\n\n- [Variables](#col-variables)\n  - [`$cols`](#col-variables-cols)\n  - [`$cols-prefix`](#col-variables-cols-prefix)\n  - [`$offset-prefix`](#col-variables-offset-prefix)\n- [Mixins](#col-mixins)\n  - [`col-helper()`](#col-helper)\n  - [`cols-helper()`](#cols-helper)\n  - [`cols-helper-with-bp()`](#cols-helper-with-bp)\n  - [`col()`](#col-col)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"col-variables\"\u003e\u003c/a\u003eVariables\n\nAll those variables could be customized depending on what you need in your `variables.scss` file.  \nHere are the default values.\n\n#### \u003ca name=\"col-variables-cols\"\u003e\u003c/a\u003e`$cols`\n\nNumber of columns for basic provided `.col-{col}@{breakpoint}` and `.offset-{col}@{breakpoint}` classes.\n\n```scss\n$cols: 12 !default;\n```\n\n#### \u003ca name=\"col-variables-cols-prefix\"\u003e\u003c/a\u003e`$cols-prefix`\n\nCol classes prefix.\n\n```scss\n$cols-prefix: $grid-prefix !default;\n```\n\n#### \u003ca name=\"col-variables-offset-prefix\"\u003e\u003c/a\u003e`$offset-prefix`\n\nOffset classes prefix.\n\n```scss\n$offset-prefix: $grid-prefix !default;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"col-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"col-helper\"\u003e\u003c/a\u003e`col-helper()`\n\nSet col class.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.col-helper;\n```\n\n##### Output\n```css\n.col {\n    position: relative;\n    width: 100%;\n    padding-right: 0.9375rem;\n    padding-left: 0.9375rem;\n    flex-basis: 0;\n    flex-grow: 1;\n    max-width: 100%;\n}\n```\n\n#### \u003ca name=\"cols-helper\"\u003e\u003c/a\u003e`cols-helper()`\n\nSet all cols classes from the [`$cols`](#col-variables-cols) variable.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.cols-helper;\n```\n\n##### Output\n```css\n.col-auto {\n  position: relative;\n  width: 100%;\n  padding-right: 0.9375rem;\n  padding-left: 0.9375rem;\n  flex: 0 0 auto;\n  width: auto;\n  max-width: 100%;\n}\n\n.col-1 {\n  position: relative;\n  width: 100%;\n  padding-right: 0.9375rem;\n  padding-left: 0.9375rem;\n  flex: 0 0 8.3333333333%;\n  max-width: 8.3333333333%;\n}\n\n.offset-1 {\n  margin-left: 8.3333333333%;\n}\n\n/* and so on */\n\n/*\n * .col-2\n * .offset-2\n * .col-3\n * .offset-3\n * .col-4\n * .offset-4\n * .col-5\n * .offset-5\n * .col-6\n * .offset-6\n * .col-7\n * .offset-7\n * .col-8\n * .offset-8\n * .col-9\n * .offset-9\n * .col-10\n * .offset-10\n * .col-11\n * .offset-11\n * .col-12\n */\n```\n\n#### \u003ca name=\"cols-helper-with-bp\"\u003e\u003c/a\u003e`cols-helper-with-bp()`\n\nSet all cols classes from the [`$cols`](#col-variables-cols) variable with breakpoints media queries.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.cols-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .col-auto\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 auto;\n        width: auto;\n        max-width: 100%;\n    }\n\n    .col-1\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 8.3333333333%;\n        max-width: 8.3333333333%;\n    }\n\n    .offset-1\\@xs-only {\n        margin-left: 8.3333333333%;\n    }\n\n    .col-2\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 16.6666666667%;\n        max-width: 16.6666666667%;\n    }\n\n    .offset-2\\@xs-only {\n        margin-left: 16.6666666667%;\n    }\n\n    .col-3\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 25%;\n        max-width: 25%;\n    }\n\n    .offset-3\\@xs-only {\n        margin-left: 25%;\n    }\n\n    .col-4\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 33.3333333333%;\n        max-width: 33.3333333333%;\n    }\n\n    .offset-4\\@xs-only {\n        margin-left: 33.3333333333%;\n    }\n\n    .col-5\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 41.6666666667%;\n        max-width: 41.6666666667%;\n    }\n\n    .offset-5\\@xs-only {\n        margin-left: 41.6666666667%;\n    }\n\n    .col-6\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 50%;\n        max-width: 50%;\n    }\n\n    .offset-6\\@xs-only {\n        margin-left: 50%;\n    }\n\n    .col-7\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 58.3333333333%;\n        max-width: 58.3333333333%;\n    }\n\n    .offset-7\\@xs-only {\n        margin-left: 58.3333333333%;\n    }\n\n    .col-8\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 66.6666666667%;\n        max-width: 66.6666666667%;\n    }\n\n    .offset-8\\@xs-only {\n        margin-left: 66.6666666667%;\n    }\n\n    .col-9\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 75%;\n        max-width: 75%;\n    }\n\n    .offset-9\\@xs-only {\n        margin-left: 75%;\n    }\n\n    .col-10\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 83.3333333333%;\n        max-width: 83.3333333333%;\n    }\n\n    .offset-10\\@xs-only {\n        margin-left: 83.3333333333%;\n    }\n\n    .col-11\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 91.6666666667%;\n        max-width: 91.6666666667%;\n    }\n\n    .offset-11\\@xs-only {\n        margin-left: 91.6666666667%;\n    }\n\n    .col-12\\@xs-only {\n        position: relative;\n        width: 100%;\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n        flex: 0 0 100%;\n        max-width: 100%;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .col-auto\\@sm\n     * .col-1\\@sm\n     * .offset-1\\@sm\n     * .col-2\\@sm\n     * .offset-2\\@sm\n     * .col-3\\@sm\n     * .offset-3\\@sm\n     * .col-4\\@sm\n     * .offset-4\\@sm\n     * .col-5\\@sm\n     * .offset-5\\@sm\n     * .col-6\\@sm\n     * .offset-6\\@sm\n     * .col-7\\@sm\n     * .offset-7\\@sm\n     * .col-8\\@sm\n     * .offset-8\\@sm\n     * .col-9\\@sm\n     * .offset-9\\@sm\n     * .col-10\\@sm\n     * .offset-10\\@sm\n     * .col-11\\@sm\n     * .offset-11\\@sm\n     * .col-12\\@sm\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .col-auto\\@sm-only\n     * .col-1\\@sm-only\n     * .offset-1\\@sm-only\n     * .col-2\\@sm-only\n     * .offset-2\\@sm-only\n     * .col-3\\@sm-only\n     * .offset-3\\@sm-only\n     * .col-4\\@sm-only\n     * .offset-4\\@sm-only\n     * .col-5\\@sm-only\n     * .offset-5\\@sm-only\n     * .col-6\\@sm-only\n     * .offset-6\\@sm-only\n     * .col-7\\@sm-only\n     * .offset-7\\@sm-only\n     * .col-8\\@sm-only\n     * .offset-8\\@sm-only\n     * .col-9\\@sm-only\n     * .offset-9\\@sm-only\n     * .col-10\\@sm-only\n     * .offset-10\\@sm-only\n     * .col-11\\@sm-only\n     * .offset-11\\@sm-only\n     * .col-12\\@sm-only\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .col-auto\\@md\n     * .col-1\\@md\n     * .offset-1\\@md\n     * .col-2\\@md\n     * .offset-2\\@md\n     * .col-3\\@md\n     * .offset-3\\@md\n     * .col-4\\@md\n     * .offset-4\\@md\n     * .col-5\\@md\n     * .offset-5\\@md\n     * .col-6\\@md\n     * .offset-6\\@md\n     * .col-7\\@md\n     * .offset-7\\@md\n     * .col-8\\@md\n     * .offset-8\\@md\n     * .col-9\\@md\n     * .offset-9\\@md\n     * .col-10\\@md\n     * .offset-10\\@md\n     * .col-11\\@md\n     * .offset-11\\@md\n     * .col-12\\@md\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .col-auto\\@md-only\n     * .col-1\\@md-only\n     * .offset-1\\@md-only\n     * .col-2\\@md-only\n     * .offset-2\\@md-only\n     * .col-3\\@md-only\n     * .offset-3\\@md-only\n     * .col-4\\@md-only\n     * .offset-4\\@md-only\n     * .col-5\\@md-only\n     * .offset-5\\@md-only\n     * .col-6\\@md-only\n     * .offset-6\\@md-only\n     * .col-7\\@md-only\n     * .offset-7\\@md-only\n     * .col-8\\@md-only\n     * .offset-8\\@md-only\n     * .col-9\\@md-only\n     * .offset-9\\@md-only\n     * .col-10\\@md-only\n     * .offset-10\\@md-only\n     * .col-11\\@md-only\n     * .offset-11\\@md-only\n     * .col-12\\@md-only\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .col-auto\\@lg\n     * .col-1\\@lg\n     * .offset-1\\@lg\n     * .col-2\\@lg\n     * .offset-2\\@lg\n     * .col-3\\@lg\n     * .offset-3\\@lg\n     * .col-4\\@lg\n     * .offset-4\\@lg\n     * .col-5\\@lg\n     * .offset-5\\@lg\n     * .col-6\\@lg\n     * .offset-6\\@lg\n     * .col-7\\@lg\n     * .offset-7\\@lg\n     * .col-8\\@lg\n     * .offset-8\\@lg\n     * .col-9\\@lg\n     * .offset-9\\@lg\n     * .col-10\\@lg\n     * .offset-10\\@lg\n     * .col-11\\@lg\n     * .offset-11\\@lg\n     * .col-12\\@lg\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .col-auto\\@lg-only\n     * .col-1\\@lg-only\n     * .offset-1\\@lg-only\n     * .col-2\\@lg-only\n     * .offset-2\\@lg-only\n     * .col-3\\@lg-only\n     * .offset-3\\@lg-only\n     * .col-4\\@lg-only\n     * .offset-4\\@lg-only\n     * .col-5\\@lg-only\n     * .offset-5\\@lg-only\n     * .col-6\\@lg-only\n     * .offset-6\\@lg-only\n     * .col-7\\@lg-only\n     * .offset-7\\@lg-only\n     * .col-8\\@lg-only\n     * .offset-8\\@lg-only\n     * .col-9\\@lg-only\n     * .offset-9\\@lg-only\n     * .col-10\\@lg-only\n     * .offset-10\\@lg-only\n     * .col-11\\@lg-only\n     * .offset-11\\@lg-only\n     * .col-12\\@lg-only\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .col-auto\\@xl\n     * .col-1\\@xl\n     * .offset-1\\@xl\n     * .col-2\\@xl\n     * .offset-2\\@xl\n     * .col-3\\@xl\n     * .offset-3\\@xl\n     * .col-4\\@xl\n     * .offset-4\\@xl\n     * .col-5\\@xl\n     * .offset-5\\@xl\n     * .col-6\\@xl\n     * .offset-6\\@xl\n     * .col-7\\@xl\n     * .offset-7\\@xl\n     * .col-8\\@xl\n     * .offset-8\\@xl\n     * .col-9\\@xl\n     * .offset-9\\@xl\n     * .col-10\\@xl\n     * .offset-10\\@xl\n     * .col-11\\@xl\n     * .offset-11\\@xl\n     * .col-12\\@xl\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .col-auto\\@xl-only\n     * .col-1\\@xl-only\n     * .offset-1\\@xl-only\n     * .col-2\\@xl-only\n     * .offset-2\\@xl-only\n     * .col-3\\@xl-only\n     * .offset-3\\@xl-only\n     * .col-4\\@xl-only\n     * .offset-4\\@xl-only\n     * .col-5\\@xl-only\n     * .offset-5\\@xl-only\n     * .col-6\\@xl-only\n     * .offset-6\\@xl-only\n     * .col-7\\@xl-only\n     * .offset-7\\@xl-only\n     * .col-8\\@xl-only\n     * .offset-8\\@xl-only\n     * .col-9\\@xl-only\n     * .offset-9\\@xl-only\n     * .col-10\\@xl-only\n     * .offset-10\\@xl-only\n     * .col-11\\@xl-only\n     * .offset-11\\@xl-only\n     * .col-12\\@xl-only\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .col-auto\\@xxl\n     * .col-1\\@xxl\n     * .offset-1\\@xxl\n     * .col-2\\@xxl\n     * .offset-2\\@xxl\n     * .col-3\\@xxl\n     * .offset-3\\@xxl\n     * .col-4\\@xxl\n     * .offset-4\\@xxl\n     * .col-5\\@xxl\n     * .offset-5\\@xxl\n     * .col-6\\@xxl\n     * .offset-6\\@xxl\n     * .col-7\\@xxl\n     * .offset-7\\@xxl\n     * .col-8\\@xxl\n     * .offset-8\\@xxl\n     * .col-9\\@xxl\n     * .offset-9\\@xxl\n     * .col-10\\@xxl\n     * .offset-10\\@xxl\n     * .col-11\\@xxl\n     * .offset-11\\@xxl\n     * .col-12\\@xxl\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .col-auto\\@xxl-only\n     * .col-1\\@xxl-only\n     * .offset-1\\@xxl-only\n     * .col-2\\@xxl-only\n     * .offset-2\\@xxl-only\n     * .col-3\\@xxl-only\n     * .offset-3\\@xxl-only\n     * .col-4\\@xxl-only\n     * .offset-4\\@xxl-only\n     * .col-5\\@xxl-only\n     * .offset-5\\@xxl-only\n     * .col-6\\@xxl-only\n     * .offset-6\\@xxl-only\n     * .col-7\\@xxl-only\n     * .offset-7\\@xxl-only\n     * .col-8\\@xxl-only\n     * .offset-8\\@xxl-only\n     * .col-9\\@xxl-only\n     * .offset-9\\@xxl-only\n     * .col-10\\@xxl-only\n     * .offset-10\\@xxl-only\n     * .col-11\\@xxl-only\n     * .offset-11\\@xxl-only\n     * .col-12\\@xxl-only\n     */\n}\n```\n\n#### \u003ca name=\"col-col\"\u003e\u003c/a\u003e`col()`\n\nGrid `col` entry point  \nCombine [`col-helper`](#col-helper), [`cols-helper`](#cols-helper) and [`cols-helper-with-bp`](#cols-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-grid' as grid;\n\n@include grid.col;\n```\n\n###### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `cols-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`col-helper`](#col-helper), [`cols-helper`](#cols-helper) and [`cols-helper-with-bp`](#cols-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Authors\n\n- **Aymeric Assier** - [github.com/myeti](https://github.com/myeti)\n- **Julien Martins Da Costa** - [github.com/jdacosta](https://github.com/jdacosta)\n\n\u003cbr /\u003e\n\n### Contributors\n\n- **Sébastien Robillard** - [github.com/robiseb](https://github.com/robiseb)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Resources \n- [Bootstrap](https://github.com/twbs/bootstrap)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## License\n\nThis project is licensed under the MIT License - see the [licence](licence) file for details","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwide%2Fstyles-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwide%2Fstyles-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwide%2Fstyles-grid/lists"}