{"id":13406971,"url":"https://github.com/sdras/cssgridgenerator","last_synced_at":"2025-05-14T10:12:43.610Z","repository":{"id":37334698,"uuid":"188726142","full_name":"sdras/cssgridgenerator","owner":"sdras","description":"🧮 Generate basic CSS Grid code to make dynamic layouts!","archived":false,"fork":false,"pushed_at":"2024-03-13T17:16:45.000Z","size":3581,"stargazers_count":5174,"open_issues_count":47,"forks_count":568,"subscribers_count":63,"default_branch":"main","last_synced_at":"2025-04-04T18:01:10.869Z","etag":null,"topics":["css-grid","generated-code","generated-layout","grid","grid-layout","grid-system","netlify","vue"],"latest_commit_sha":null,"homepage":"https://cssgrid-generator.netlify.com/","language":"Vue","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/sdras.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["sdras"]}},"created_at":"2019-05-26T20:01:03.000Z","updated_at":"2025-04-02T18:35:25.000Z","dependencies_parsed_at":"2023-02-01T12:30:31.695Z","dependency_job_id":"3759e5d0-50b1-44a8-a085-2b3769943bc2","html_url":"https://github.com/sdras/cssgridgenerator","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/sdras%2Fcssgridgenerator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdras%2Fcssgridgenerator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdras%2Fcssgridgenerator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sdras%2Fcssgridgenerator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sdras","download_url":"https://codeload.github.com/sdras/cssgridgenerator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487163,"owners_count":21112185,"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","generated-code","generated-layout","grid","grid-layout","grid-system","netlify","vue"],"created_at":"2024-07-30T19:02:44.506Z","updated_at":"2025-04-11T21:43:27.847Z","avatar_url":"https://github.com/sdras.png","language":"Vue","readme":"\u003ca href=\"https://www.netlify.com\"\u003e\n  \u003cimg src=\"https://www.netlify.com/img/global/badges/netlify-color-accent.svg\"/\u003e\n\u003c/a\u003e\n\n# CSS Grid Generator\n\n### Site: [https://cssgrid-generator.netlify.com/](https://cssgrid-generator.netlify.com/)\n\n![CSS Grid Generator](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/og-cssgrid.jpg)\n\nThis project is a way for people to use CSS Grid features quickly to create dynamic layouts.\n\nYou can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.\n\nI noticed a lot of people weren't using Grid because they felt it was too complicated and they couldn't understand it. Grid is capable of so much, and this small generator only touches on a fraction of the features. The purpose of this is so people get up and running quickly, and create more interesting layouts.\n\nOnce you work with this a bit, I suggest checking out resources by [Rachel Andrew](https://twitter.com/rachelandrew), [Jen Simmons](https://twitter.com/jensimmons), and [Dave Geddes](https://twitter.com/geddski) to dive deeper. There is also a [CSS Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/) on CSS-Tricks, and a fun little game called [Grid Garden](https://cssgridgarden.com/) to help you learn more!\n\nThis project is open to contributions!\n\n### Project setup\n\n```\nyarn install\n```\n\nCompiles and hot-reloads for development\n\n```\nyarn run serve\n```\n\nCompiles and minifies for production\n\n```\nyarn run build\n```\n\nRun your tests\n\n```\nyarn run test\n```\n\nLints and fixes files\n\n```\nyarn run lint\n```\n\nCustomize configuration\n\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","funding_links":["https://github.com/sponsors/sdras"],"categories":["Vue","Tools \u0026 Resources","Frameworks / Resources"],"sub_categories":["23. CSS Grid Generator","C"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsdras%2Fcssgridgenerator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsdras%2Fcssgridgenerator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsdras%2Fcssgridgenerator/lists"}