{"id":13656495,"url":"https://github.com/vladocar/60gs","last_synced_at":"2025-08-01T04:14:06.818Z","repository":{"id":57093172,"uuid":"136732178","full_name":"vladocar/60gs","owner":"vladocar","description":"60GS - 60 Columns Grid System based on CSS Grid Layout","archived":false,"fork":false,"pushed_at":"2018-06-12T13:27:47.000Z","size":70,"stargazers_count":65,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-10T09:37:49.010Z","etag":null,"topics":["css","css-framework","css-grid","grid","grid-layout","grid-system","html"],"latest_commit_sha":null,"homepage":"https://vladocar.github.io/60gs/","language":"HTML","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/vladocar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-09T14:50:46.000Z","updated_at":"2023-12-27T21:54:40.000Z","dependencies_parsed_at":"2022-08-22T21:31:28.285Z","dependency_job_id":null,"html_url":"https://github.com/vladocar/60gs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladocar%2F60gs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladocar%2F60gs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladocar%2F60gs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vladocar%2F60gs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vladocar","download_url":"https://codeload.github.com/vladocar/60gs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225538184,"owners_count":17485151,"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","grid","grid-layout","grid-system","html"],"created_at":"2024-08-02T05:00:22.002Z","updated_at":"2024-11-20T11:23:25.350Z","avatar_url":"https://github.com/vladocar.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"60gs.png\" /\u003e\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e 60 Columns Grid System  \u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e 60 Grid System is Starter Grid for the CSS Grid. \u003c/p\u003e\n\n\u003chr/\u003e\n\nWhat is 60 Grid System?\n\n60 Grid System is Starter Grid for the CSS Grid.\n\nIt is just one CSS class.\n\nLet me show you the code:\n\n```css\n.grid {\n          display: grid;\n          grid-template-columns: repeat(60, 1fr)\n        }\n\n```\n\nThis is it? You must be joking!? Is it some kind of dark magic?\n\n\nI will show you it’s dark secrets in a minute. Just give me a chance to explain.\n\nWhy 60 columns?\n\n60 is the first number that is dividable by 2,3,4,5 and 6.\n\nSo what?\n\nThis is the easiest way to make 1- 6 column grid with equal width using the CSS Grid.\n\nI’m talking about this picture:\n\n\u003ca href=\"https://vladocar.github.io/60gs/\"\u003e\u003cimg src=\"demo-grid.png\"\u003e\u003c/a\u003e\n\nHmm.. I’m sceptical about this?\n\nBack in the day the 960px was the magic number and was dividable by 2,3,4,5 and 6. You all probably used 960px layout in the past.\n\n60 Grid System does the same thing 1 - 6 columns by making 60 smaller units. Plus is flexible.\n\nIt will work with any width:\n\n```css\n.grid {\n   width: 1237px / 83% / 40rem /* random numbers */\n   display: grid;\n   grid-template-columns: repeat(60, 1fr)\n}\n```\nYou can also add grid-gap:\n\n```css\n.grid {\n   width: 1237px / 83% / 40rem /* random numbers */\n   display: grid;\n   grid-gap: 10px; /* random number */\n   grid-template-columns: repeat(60, 1fr)\n}\n```\n\nI don't get it? How you can add columns? I like to make my own semantic HTML5 friendly layout and I don't want to use any framework.\n\nYou can. Make your own id and classes.\n\nI like layout with Header, Footer, Sidebar the classic style, how can I do that? \n\nHmm, nobody does that anymore, but you are the boss.\n\nYou probably want something like this:\n\n```css\n#header, #footer { grid-column: 1 / 61 }\n#sidebar {  grid-column: 1 / 17 }\n#article { grid-column: 17 / 61 }\n```\n\n\u003ca href=\"https://vladocar.github.io/60gs/60.html\"\u003eHere is the demo\u003c/a\u003e\n\nI still don't understand  1 / 17 and 17 / 61 ?\n\nAre you sure you know CSS Grid!? First go learn the CSS Grid and come back later.\n\nYeah I'm still learning Flexbox.. now CSS Grid. Life was easier back in the day.\n\nI hear you, brother.\n\nI'm back. So I can add my own custom columns with my own naming system?\n\nYes, absolutely.\n\nI just need to specify the grid-column to go form 1 to 61, right?\n\nYes, exactly.\n\nWhat about overlapping columns?\n\nOverlapping columns .. ah you are that guy that watched the video about overlapping columns and you want to make multilayer posters with HTML and CSS. Sure you can do overlapping columns as well. Example (1 to 23 and 17 to 30…) just overlap the numbers.\n\nI don't like to make header, footer ids. What are we 1996? Can me make something more modern like OOP CSS?\n\nFinally some good questions. Yes we can!\n\nWith the CSS Grid we can merge columns like this:\n\n```css\n.col-30 { grid-column-end: span 30 }  /* 2 columns */\n.col-20 { grid-column-end: span 20 } /* 3 columns */\n```\n\n```HTML\n\u003cdiv class=“col-30”\u003e 50% \u003c/div\u003e\n\u003cdiv class=“col-30”\u003e 50% \u003c/div\u003e\n\n\u003cdiv class=“col-30”\u003e 33.33% \u003c/div\u003e\n\u003cdiv class=“col-30”\u003e 33.33% \u003c/div\u003e\n\u003cdiv class=“col-30”\u003e 33.33% \u003c/div\u003e\n```\n\nAha, so it is important to 30 + 30 = 60 meaning 50% and 50% column?\n\nYes.\n\nCan I use Sass with this?\n\nYes I’ve build some Sass. Go check the 60gs.scss file.\n\nIs it responsive?\n\nIt can be, I’ve made some basic responsiveness in the 60gs.css file and it is your task to add more features.\n\nNow some hard questions: Can I have 7 identical columns in one row?\n\nNo. Who does 7 columns!? Not even Rick and Morty have 7 columns in their grid! And Rick is the smartest man in the universe.\n\nBut the designer made 7 column grid, I don’t know what to do?\n\nFire the designer.\n\nBut seriously, I need 7 columns?\n\nAllllright..  .grid7{ grid-template-columns: repeat(7, 1fr) } .somename{grid-column-end: span 1} and put the grid7 inside the grid. Like Matrix or Inception.\n\nWhat about 11 columns?\n\nDo you know to play Russian Roulette .. play it for 11 times .. problem solved :)\n\nI played it for 11 times can you now tell me the solution?\n\nHmm.. you lucky bas… Yes, you need to do the same thing like with the 7 columns.\n\nEveryone was .. CSS Grid is the next big thing.. now I need to have 60 columns so I can have 6 columns?\n\nThere's more than one way to skin a cat, use the solution that works best for you.\n\nWhat about browser compatibility?\n\nFirst, know your customers. If your customers are people like me and you  don’t have a problem.. otherwise go with the flow -\u003e  float.\n\nSo basically 60 gs is like the 960px grid but just for the CSS Grid?\n\nYes, but 60 gs can take any value not just 960px and is much more flexible and fluid plus is super easy to make your grid-gap.\n\nThanks, I'll probably stick with Flexbox.\n\nP.S Ahh, You are still here. You are wondering where is the NPM command.. ahh sorry you prefer yarn. Didn't you read that npm is new yarn? Aha, you use webpack lately. You can just copy paste, it's only one CSS class. \n\nJust kidding \u003ca href=\"https://github.com/vladocar/npm-I-love-you-too\"\u003enpm I love you too :)\u003c/a\u003e\n\nP.S.S Please, don't be that guy who says: Why do I need another grid CSS Grid? CSS Grid is already a grid we no longer need to use any layout template.. Let me give you a simple answer: 60 GS can be applied on any medium Photoshop, Illustrattor, Paper.. 60 Grid System is pure math. You can use the 60 Grid units to make meaniful Grid System. CSS Grid is just a starting tool just like Photoshop or Illustrator.\n\n\n\u003ch2\u003e Install \u003c/h2\u003e\n \nYou can copy and paste the code, download it form GitHub, use npm or use CDN.\n\n```shell\n$ npm i 60gs\n```\n\n```html\n \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/60gs@1.0.0/60gs.css\"\u003e\n\nor\n\n \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/60gs@1.0.0/60gs-barebone.css\"\u003e\n```\n\n\u003ch2\u003e Demos \u003c/h2\u003e\n\n[https://vladocar.github.io/60gs/](https://vladocar.github.io/60gs/)\n\n[Demo 1](https://vladocar.github.io/60gs/60-Grid-Demo.html)\n\n\n### License\n\nThis project is licensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvladocar%2F60gs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvladocar%2F60gs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvladocar%2F60gs/lists"}