{"id":22070783,"url":"https://github.com/fylgja/fylgja-flex-grid","last_synced_at":"2025-07-24T08:36:24.874Z","repository":{"id":34942942,"uuid":"174121860","full_name":"fylgja/fylgja-flex-grid","owner":"fylgja","description":"Create a complete grid using flexbox. And only set the columns you need.  Making it even smaller than other flex grids.","archived":false,"fork":false,"pushed_at":"2024-11-03T12:22:25.000Z","size":145,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-30T16:15:57.148Z","etag":null,"topics":["css","css-grid","flexbox","flexbox-grid","fylgja","grid","layout","scss"],"latest_commit_sha":null,"homepage":"https://fylgja.dev/","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/fylgja.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-06T10:16:26.000Z","updated_at":"2024-11-03T12:22:22.000Z","dependencies_parsed_at":"2024-02-05T12:27:56.197Z","dependency_job_id":"bcf99adc-f13a-405f-85cc-75a7b15eb85f","html_url":"https://github.com/fylgja/fylgja-flex-grid","commit_stats":{"total_commits":90,"total_committers":4,"mean_commits":22.5,"dds":"0.25555555555555554","last_synced_commit":"c24cc500fadb0e0b155a37a3d234fc9f8019ff38"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fylgja%2Ffylgja-flex-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fylgja%2Ffylgja-flex-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fylgja%2Ffylgja-flex-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fylgja%2Ffylgja-flex-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fylgja","download_url":"https://codeload.github.com/fylgja/fylgja-flex-grid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227422580,"owners_count":17775020,"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":["css","css-grid","flexbox","flexbox-grid","fylgja","grid","layout","scss"],"created_at":"2024-11-30T20:18:10.251Z","updated_at":"2024-11-30T20:18:10.974Z","avatar_url":"https://github.com/fylgja.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fylgja - Flex Grid\n\n[![NPM version](https://img.shields.io/npm/v/@fylgja/flex-grid.svg)](https://www.npmjs.org/package/@fylgja/flex-grid)\n\n\u003e [!Important]\n\u003e This our legacy grid following the more static column approach used by many.\n\u003e \n\u003e We moved to a more flexible approach with the [Auto Grid](https://fylgja.dev/components/auto-grid/),\n\u003e that follows a content based approach instead.\n\u003e \n\u003e The Flex Grid did get an upgrade in version 3,\n\u003e which is support for the newer Sass version, with the new module syntax.\n\u003e but with this version we will also started to stop supporting any development on this grid,\n\u003e and will just support the Flex Grid with bug fixes.\n\nCreate a complete grid using flexbox, and only set the columns you need.\n\nMaking it even smaller than other flex grids.\n\n## Installation\n\n```bash\nnpm install @fylgja/flex-grid\n```\n\nThen include the component in to your code via;\n\n```scss\n@use \"@fylgja/flex-grid\";\n// Or via PostCSS import\n@import \"@fylgja/flex-grid\";\n```\n\n## How to use\n\nThis grid does not work with a 12 columns or 24 columns layout,\nunlike other frameworks.\n\nThis only makes your CSS bigger with unused columns.\n\nThe power of the flex-grid is that for each media query,\nthere are specific amount of columns set.\n\nSo for example on mobile you might only need 2 columns.\nThen you can set the flex-grid to only load 2 columns.\n\n```html\n\u003cdiv class=\"flex-grid\"\u003e\n    \u003cdiv class=\"cell sm-2\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"cell sm-2\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nEach cell size is 100% divided by `$i`.\n\nMaking it way more clear what size you can set.\n\nAnd unlike 12 column grid you can set a 5 column grid row.\n\nSince each column you create is based on the 100% divided by `$i`.\n\n### Classes\n\n_$mq = @media, e.g. `.sm-2` or `.lg-2`_\n\n`.flex-grid`: Sets the grid and this is also the wrapper class. (required)\n\n`.cell`: Sets the grid item (required)\n\n* `.${mq}-${1}`: the grid item size\n* `.${mq}-grow`: the grid item size that grows to fit the available space\n* `.${mq}-shrink`: the grid item size that shrinks to fit the content size\n\n**Depends on the booleans set, [see config](#config)**\n\n`.-gap`: modifier class to set grid gap\n\n`.-fill`: modifier class to make each cells content equal height,\nworks great with cards and other flexable components.\n\n`.offset-${mq}-${i}`: set the cell offset, from left.\n\n`.cell` and `.offset` Chunks: allow you to create more complex flows.\n\nExample:\n\n```html\n\u003cdiv class=\"flex-grid\"\u003e\n    \u003cdiv class=\"cell md-3-2\"\u003eI am taking 2/3 of the space\u003c/div\u003e\n    \u003cdiv class=\"cell md-3\"\u003eI am taking 1/3 of the space\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Config\n\nBy default the config is set for the smallest use case,\nso many configs are disabled to load only what is needed.\n\n### Booleans\n\n| Var                 | Default | Description                              |\n| ------------------- | ------- | ---------------------------------------- |\n| $enable-flex-gap    | true    | Load the gap directly without gap class  |\n| $enable-flex-fill   | false   | Enable the fill class                    |\n| $enable-flex-offset | false   | Enable the cell offset classes           |\n| $enable-flex-chunks | true    | Enable the cell and offset chunk classes |\n\n### Setters\n\n| Var              | Default                              | Description             |\n| ---------------- | ------------------------------------ | ----------------------- |\n| $flex-grid-gaps  | ()                                   | Additional gaps         |\n| $flex-grid-cells | xxs: 2, xs 3, sm 3, md 4, lg 4, xl 5 | Amount of cells, per MQ |\n| $gap-size        | 1rem                                 | The default gap size    |\n\n### Breakpoints\n\nAll breakpoints are set via the Fylgja component helper [`@fylgja/mq`](https://fylgja.dev/components/mq/),\nand can be changed from there or directly with `$flex-grid-breakpoints` map.\n\n`xxs` is the version of the cell sizes and breakpoint'less version, this value is required in the map.,\nbut the key name can be anything you want it to be.\n\n## Helper (mixins)\n\nThe flex grid is build using a few helper mixins.\nYou can use the helpers if you need a little more than the config can offer you.\n\n| mixin             | options       | Description                   |\n| ----------------- | ------------- | ----------------------------- |\n| flex-grid-mq      | $mq           | Create a mq with if statement |\n| flex-grid-gap     | $size, $class | Create a grid gap             |\n| flex-grid-cells   | $mq, $i       | Create a cell sizes           |\n| flex-grid-offsets | $mq, $i       | Create a cell offset sizes    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffylgja%2Ffylgja-flex-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffylgja%2Ffylgja-flex-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffylgja%2Ffylgja-flex-grid/lists"}