{"id":15011351,"url":"https://github.com/pixelscript-io/the-grid","last_synced_at":"2026-03-17T23:01:46.085Z","repository":{"id":150532373,"uuid":"96244642","full_name":"pixelscript-io/the-grid","owner":"pixelscript-io","description":"A lightweight 12x12 customizable grid system built with CSS Grid and LESS.","archived":false,"fork":false,"pushed_at":"2017-07-04T20:36:06.000Z","size":54,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-19T16:09:56.432Z","etag":null,"topics":["css","css-framework","css-grid","less","lesscss","lightweight","thegrid"],"latest_commit_sha":null,"homepage":"","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/pixelscript-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2017-07-04T18:38:58.000Z","updated_at":"2022-02-20T18:05:58.000Z","dependencies_parsed_at":"2023-07-16T09:02:28.355Z","dependency_job_id":null,"html_url":"https://github.com/pixelscript-io/the-grid","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"ec7f72eceadb59c4328866672fa6f76f19b0dfd3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelscript-io%2Fthe-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelscript-io%2Fthe-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelscript-io%2Fthe-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelscript-io%2Fthe-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelscript-io","download_url":"https://codeload.github.com/pixelscript-io/the-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243307333,"owners_count":20270256,"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-framework","css-grid","less","lesscss","lightweight","thegrid"],"created_at":"2024-09-24T19:40:46.780Z","updated_at":"2025-12-28T23:20:44.048Z","avatar_url":"https://github.com/pixelscript-io.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# The Grid\n\nA 12x12 customizable grid built with CSS Grid and LESS.\n\n![Grid System](http://i.imgur.com/4hh436c.png)\n\n## Installation\n\nSimply just clone this repo to get started! View [docs/index.html](https://joeberthelot88.github.io/the-grid/) for a variety of different possibilities.\n\n## Usage\n\n1. Initialize the grid:\n\n```html\n\u003cdiv class=\"grid\"\u003e\u003c/div\u003e\n```\n\n2. Add your sections:\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv id=\"header\"\u003e\u003c/div\u003e\n  \u003cdiv id=\"article\"\u003e\u003c/div\u003e\n  \u003cdiv id=\"sidebar\"\u003e\u003c/div\u003e\n  \u003cdiv id=\"footer\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n3. Position your sections:\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"col-1-12 row-1-1\"   id=\"header\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"col-1-8  row-2-11\"  id=\"article\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"col-9-12 row-2-11\"  id=\"sidebar\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"col-1-12 row-12-12\" id=\"footer\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n**Note:** The order of your sections *do not matter*!  This markup will appear exactly the same:\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"col-1-8  row-2-11\"  id=\"article\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"col-1-12 row-12-12\" id=\"footer\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"col-9-12 row-2-11\"  id=\"sidebar\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"col-1-12 row-1-1\"   id=\"header\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n4. Configure your grid settings in `config.less`.  As of now the only configuration options are:\n\n- Set column gap size.\n- Set row gap size.\n- Set grid width.\n\n\n## The Classes\n\nThis is a 12x12 grid meaning there are 12 columns and 12 rows.  There are **over 150 generated classes**.  The classes are structured as follows:\n\n```\n(col or row)-(starting block)-(ending block)\n```\n\nParameters:\n\n```\n[col]-[1-12]-[1-12]\n[row]-[1-12]-[1-12]\n```\n\nExamples:\n\n```\n.col-1-12 (This section will start at column 1 and span all 12 columns)\n.col-6-12 (This section will start at column 6 and span 6 additional columns)\n\n.row-4-12 (This section will start at row 4 and span 8 additional rows)\n.row-12-12 (This section will start at row 12 and only span 1 row)\n```\n\n**Note:** Sections cannot span backwards.  For example, the following is not possible:\n\n```\n.col-12-6\n.row-2-1\n```\n\n**Note:** You do not need to specify both .col and .row classes on a section.  If two sequential sections span more than 12 blocks, the second section will automatically break onto the next row/column however specifying both is recommended.\n\n\n## Helper Classes\n\n#### Content Alignment\n\nAligning content is easy.  The following classes will align your content vertically and horizontally, as you wish:\n\n1. .content-center-v (Vertically center content)\n2. .content-center-h (Horizontally center content)\n3. .content-end-v (Vertically align content to bottom)\n4. .content-end-h (Horizontally align content to right)\n\nExample markup:\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"col-1-12 row-1-1 content-center-h\"\u003eThis text is horizontally centered.\u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n#### Nested Grids\n\nNesting grids is also extremely easy.  Just add the `.grid` class to your section!\n\nExample markup:\n\n```html\n\u003cdiv class=\"grid\"\u003e\n  \u003cdiv class=\"grid col-1-12 row-1-6\"\u003e\n    \u003cdiv class=\"col-1-12 row-1-1\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-1-12 row-2-12\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n#### Responsiveness\n\n*Coming soon...*\n\n\n#### Other Helper Classes\n\n1. .fill-height - Sets the min-height of the grid to 100vh.  This is an extremely easy way to get a sticky footer.\n\nExample markup:\n\n```html\n\u003cdiv class=\"grid fill-height\"\u003e\n  \u003cdiv class=\"col-1-12 row-1-1\"   id=\"header\"\u003eThis header is at the top of the viewport.\u003c/div\u003e\n  \u003cdiv class=\"col-1-8  row-2-11\"  id=\"article\"\u003eI span the remaining height of the leftover space.\u003c/div\u003e\n  \u003cdiv class=\"col-9-12 row-2-11\"  id=\"sidebar\"\u003eI span the remaining height of the leftover space.\u003c/div\u003e\n  \u003cdiv class=\"col-1-12 row-12-12\" id=\"footer\"\u003eThis footer as at the bottom of the viewport.\u003c/div\u003e\n\u003c/div\u003e\n```\n\n2. .fixed-width - Sets a fixed width to the grid.\n3. .center-grid - Centers the grid on the page.  This must be used with `.fixed-width`.\n\nExample markup:\n\n```html\n\u003cdiv class=\"grid fixed-width center-grid\"\u003e\n  \u003cdiv class=\"col-1-12 row-1-1\"   id=\"header\"\u003eThis header is at the top of the viewport.\u003c/div\u003e\n  \u003cdiv class=\"col-1-8  row-2-11\"  id=\"article\"\u003eI span the remaining height of the leftover space.\u003c/div\u003e\n  \u003cdiv class=\"col-9-12 row-2-11\"  id=\"sidebar\"\u003eI span the remaining height of the leftover space.\u003c/div\u003e\n  \u003cdiv class=\"col-1-12 row-12-12\" id=\"footer\"\u003eThis footer as at the bottom of the viewport.\u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n## Contributing\n\n1. Fork it!\n2. Create your new branch: `git checkout -b my-new-branch`\n3. Commit your changes: `git commit -am 'Add some stuff'`\n4. Push to the branch: `git push origin my-new-branch`\n5. Submit a pull request :D\n\n## Credits\n\nGrid system built by Joe Berthelot.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelscript-io%2Fthe-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelscript-io%2Fthe-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelscript-io%2Fthe-grid/lists"}