{"id":13813367,"url":"https://github.com/devlint/gridlex","last_synced_at":"2025-05-15T00:10:42.263Z","repository":{"id":34200744,"uuid":"38056541","full_name":"devlint/gridlex","owner":"devlint","description":"Just a CSS Flexbox Grid System","archived":false,"fork":false,"pushed_at":"2023-04-16T15:23:44.000Z","size":822,"stargazers_count":1375,"open_issues_count":34,"forks_count":145,"subscribers_count":52,"default_branch":"master","last_synced_at":"2025-03-30T15:06:46.546Z","etag":null,"topics":["css","css-grid","css3","flexbox-grid","grid","sass","scss"],"latest_commit_sha":null,"homepage":"http://gridlex.devlint.fr","language":"CSS","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/devlint.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","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}},"created_at":"2015-06-25T15:09:28.000Z","updated_at":"2025-03-30T13:50:08.000Z","dependencies_parsed_at":"2024-01-15T13:33:26.974Z","dependency_job_id":null,"html_url":"https://github.com/devlint/gridlex","commit_stats":{"total_commits":184,"total_committers":15,"mean_commits":"12.266666666666667","dds":"0.38586956521739135","last_synced_commit":"72df83e1659ed8f298b1ca2cdc6ba8a81a49db2f"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlint%2Fgridlex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlint%2Fgridlex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlint%2Fgridlex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devlint%2Fgridlex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devlint","download_url":"https://codeload.github.com/devlint/gridlex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509219,"owners_count":20950232,"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","css3","flexbox-grid","grid","sass","scss"],"created_at":"2024-08-04T04:01:15.245Z","updated_at":"2025-04-06T16:09:42.722Z","avatar_url":"https://github.com/devlint.png","language":"CSS","readme":"# Gridlex\n## Just a Flexbox Grid System\n\n[![Join the chat at https://gitter.im/devlint/gridlex](https://badges.gitter.im/devlint/gridlex.svg)](https://gitter.im/devlint/gridlex?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\nv. 2.7.1\n\n\nBased on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.\n\nThe concept is simple: you need to wrap your `.col` in a `.grid`.\n\n### What can we expect?\n- Basically each column is the same width as every other cell in the grid.\n- But you can add sizing classes to individual columns.\n- For responsive designs, you can add classes based on media-queries.\n- Top, bottom, or middle. For the grid. And for the columns.\n- Grids can be nested. Always. Directly in a column.\n\n### Sass, CSS?\n\n**I just wanna use it in my page!**\n\nTo use Gridlex out of the box, call the gridlex.min.css file in your project :\n\nVia CDN:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css\"\u003e\n```\nor\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/gridlex@2.7.1/dist/gridlex.min.css\" integrity=\"sha256-z8OrWCce0gDjwavCHKqxiPIo74u8go25fRiqW6jefXk=\" crossorigin=\"anonymous\"\u003e\n```\n[![](https://data.jsdelivr.com/v1/package/npm/gridlex/badge)](https://www.jsdelivr.com/package/npm/gridlex)\n\n**I want to include it in my source files!**\n\nJust include gridlex/src/gridlex.scss \nand \nupdate the $gl- vars:\n\u003ctable\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth\u003eVariable names\u003c/th\u003e\n        \u003cth\u003eDefault value\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003e$gl-colCount:\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ccode\u003e12\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003e$gl-gridName:\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ccode\u003egrid\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003e$gl-colName:\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ccode\u003ecol\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003e$gl-attributeName:\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ccode\u003eclass\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003e$gl-gutter:\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ccode\u003e1rem\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003e$gl-gutter-vertical:\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ccode\u003e1rem\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003e$gl-mq-width:\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ccode\u003e'max-width'\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ccode\u003e$gl-mq-list:\u003c/code\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cpre\u003e\u003ccode\u003e(\n         lg: 80em, // max 1280px\n         md: 64em, // max 1024px\n         sm: 48em, // max 768px\n         xs: 36em // up to 576px\n )\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Install via Npm\nnpm install gridlex --save\n\n### Install via Bower\nbower install gridlex --save\n\n\n### 3 ways to use Gridlex\n**1- The basic. Just add a class `.grid-*` (from -1 to -12)**\n```html\n\u003cdiv class=\"grid-1\"\u003e\n\t\u003cdiv class=\"col\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n```\n\n**2- The precise. Compose cell by cell (with class like `.col-*`)**\n```html\n\u003cdiv class=\"grid\"\u003e\n\t\u003cdiv class=\"col-12\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n```\n\n**3- The automatic. Just add number of cells you want in the grid (`.grid \u003e .col`)**\n```html\n\u003cdiv class=\"grid\"\u003e\n\t\t\u003cdiv class=\"col\"\u003e...\u003c/div\u003e\n\t\t\u003cdiv class=\"col\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Gridlex and media-queries\nBecause of responsive, you sometimes need to change the size of columns: with this keys as classes you can control your layout by media-queries.\n\nColumns can be hidden at breakpoints using `_*-0` (e.g. `col-4_md-6_sm-0`)\n\u003ctable\u003e\n\u003cthead\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003eCSS Media Query\u003c/th\u003e\n\t\t\u003cth\u003eApplies\u003c/th\u003e\n\t\t\u003cth\u003eUsage\u003c/th\u003e\n\t\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e@media screen and (max-width: 36rem)\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd\u003eMax 576px\u003c/td\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e\u003cb\u003e_xs\u003c/b\u003e-*\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e@media screen and (max-width: 48em)\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd\u003eMax 768px\u003c/td\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e\u003cb\u003e_sm\u003c/b\u003e-*\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e@media screen and (max-width: 64em)\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd\u003eMax 1024px\u003c/td\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e\u003cb\u003e_md\u003c/b\u003e-*\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e@media screen and (max-width: 80em)\u003c/code\u003e\u003c/td\u003e\n\t\t\u003ctd\u003eMax 1280px\u003c/td\u003e\n\t\t\u003ctd\u003e\u003ccode\u003e\u003cb\u003e_lg\u003c/b\u003e-*\u003c/code\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\nSee more : http://gridlex.devlint.fr\n","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlint%2Fgridlex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevlint%2Fgridlex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevlint%2Fgridlex/lists"}