{"id":13824566,"url":"https://github.com/JonathanSpeek/spacegrid","last_synced_at":"2025-07-08T19:32:26.192Z","repository":{"id":73189568,"uuid":"67881952","full_name":"JonathanSpeek/spacegrid","owner":"JonathanSpeek","description":"A no-frills responsive grid layout to help you get started on your next project.","archived":false,"fork":false,"pushed_at":"2020-02-17T20:56:11.000Z","size":202,"stargazers_count":205,"open_issues_count":0,"forks_count":21,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-06-04T17:11:32.816Z","etag":null,"topics":["css","grid-layout"],"latest_commit_sha":null,"homepage":"https://jonathanspeek.github.io/spacegrid/","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/JonathanSpeek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","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":"2016-09-10T16:30:46.000Z","updated_at":"2024-07-01T07:59:45.000Z","dependencies_parsed_at":"2024-01-18T03:48:40.599Z","dependency_job_id":null,"html_url":"https://github.com/JonathanSpeek/spacegrid","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/JonathanSpeek/spacegrid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonathanSpeek%2Fspacegrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonathanSpeek%2Fspacegrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonathanSpeek%2Fspacegrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonathanSpeek%2Fspacegrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JonathanSpeek","download_url":"https://codeload.github.com/JonathanSpeek/spacegrid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonathanSpeek%2Fspacegrid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264334072,"owners_count":23592357,"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","grid-layout"],"created_at":"2024-08-04T09:01:04.962Z","updated_at":"2025-07-08T19:32:25.939Z","avatar_url":"https://github.com/JonathanSpeek.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg style=\"width:100px;height:auto;\" src=\"https://cdn.rawgit.com/JonathanSpeek/spacegrid/master/spacegrid-logo.svg\"/\u003e\n    \u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/tag/jonathanspeek/spacegrid.svg\" alt=\"Tag\"\u003e\n  \u003ca href=\"https://rubygems.org/gems/spacegrid\"\u003e\u003cimg src=\"https://img.shields.io/gem/dt/spacegrid.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/spacegrid\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/spacegrid.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/JonathanSpeek/spacegrid/blob/master/LICENSE.txt\"\u003e\u003cimg src=\"https://img.shields.io/github/license/jonathanspeek/spacegrid.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c/div\u003e\n\nA basic, responsive grid layout to help you get started on your next project (in about 1kb 🔥).\n---\n\n### Setup your project\n\nDownload either the [spacegrid.min.css](https://raw.githubusercontent.com/JonathanSpeek/spacegrid/master/spacegrid.min.css) or [spacegrid.css](https://raw.githubusercontent.com/JonathanSpeek/spacegrid/master/spacegrid.css) file and link it to your project:\n\n```html\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003c!-- for the @media queries to function --\u003e\n\t\t\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n\n\t\t\u003c!-- include the space-grid css --\u003e\n\t\t\u003clink rel=\"stylesheet\" href=\"path_to/space-grid/css/spacegrid.min.css\"\u003e\n\t\u003c/head\u003e\n\t...\n\u003c/html\u003e\n```\n\n## Quick Installation\n\n### Install with NPM\nSee [documentation](https://www.npmjs.com/search?q=spacegrid)\n\n    $ npm install spacegrid\n\nAdd this to the head of your pages:\n```html\n\u003cscript src=\"path_to/node_modules/spacegrid/build/bundle.js\"\u003e\u003c/script\u003e\n```\n\n### Install with Bower\nSee [documentation](https://github.com/JonathanSpeek/spacegrid_bower.git)\n\n    $ bower install spacegrid\n\nAdd this to the head of your pages:\n```html\n\u003clink href=\"path_to/bower_components/spacegrid/spacegrid.css\" rel=\"stylesheet\" type=\"text/css\"\u003e\n```\n\n\n### Install using Ruby Gem\nSee [documentation](https://rubygems.org/gems/spacegrid)\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'spacegrid'\n```\n\nAnd then execute:\n\n    $ bundle\n\nOr install it yourself as:\n\n    $ gem install spacegrid\n\nAdd this to your application.css file:\n```css\n*= require spacegrid\n```\n\n### Examples\n\n```html\n\u003c!-- full width example --\u003e\n\u003cdiv class=\"row\"\u003e\n\t\u003cdiv class=\"space-1\"\u003eThis is 100% width\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- three columns --\u003e\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"space-3\"\u003eThis is 33.3% width\u003c/div\u003e\n    \u003cdiv class=\"space-3\"\u003eThis is 33.3% width\u003c/div\u003e\n    \u003cdiv class=\"space-3\"\u003eThis is 33.3% width\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- two columns --\u003e\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"space-2\"\u003eThis is 50% width\u003c/div\u003e\n    \u003cdiv class=\"space-2\"\u003eThis is 50% width\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- four columns --\u003e\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"space-4\"\u003eThis is 25% width\u003c/div\u003e\n    \u003cdiv class=\"space-4\"\u003eThis is 25% width\u003c/div\u003e\n    \u003cdiv class=\"space-4\"\u003eThis is 25% width\u003c/div\u003e\n    \u003cdiv class=\"space-4\"\u003eThis is 25% width\u003c/div\u003e\n\u003c/div\u003e\n```\n\nSee it in use [here](http://speek.design).\n\n---\n### With Added Flexibility\n\n#### Here are a few add-ons:\n\n* 25% width\n* 40% width\n* 60% width\n* 66% width\n* 75% width\n\n```\n\u003c!-- these works too :D --\u003e\n\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"space-3\"\u003eThis is 33.3% width\u003c/div\u003e\n    \u003cdiv class=\"space-66\"\u003eThis is 66.6% width\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"space-75\"\u003eThis is 75% width\u003c/div\u003e\n    \u003cdiv class=\"space-25\"\u003eThis is 25% width\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"space-40\"\u003eThis is 40% width\u003c/div\u003e\n    \u003cdiv class=\"space-60\"\u003eThis is 60% width\u003c/div\u003e\n\u003c/div\u003e\n```\n---\n### Compatibility\n#### CSS3 media queries are utilitized, which are well-supported amongst most modern browsers. Here's a compatibility [chart](http://caniuse.com/#search=CSS3%20Media%20Queries).\n---\n\n## Contributing to Spacegrid\n- Spacegrid CSS is currently maintained by [@JonathanSpeek](http://github.com/jonathanspeek)\n- Checkout the [Contribution Guide](https://github.com/JonathanSpeek/spacegrid/blob/master/CONTRIBUTING.md) if you'd like to lend a hand. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJonathanSpeek%2Fspacegrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJonathanSpeek%2Fspacegrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJonathanSpeek%2Fspacegrid/lists"}