{"id":20833580,"url":"https://github.com/princiya/gridvsflexbox","last_synced_at":"2026-05-24T02:32:49.303Z","repository":{"id":95465877,"uuid":"88294707","full_name":"princiya/gridVsFlexbox","owner":"princiya","description":"CSS Grid vs Flexbox - the new web layout","archived":false,"fork":false,"pushed_at":"2017-04-14T19:14:09.000Z","size":5,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-27T11:00:21.183Z","etag":null,"topics":["css3","cssgrid","flexbox"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/princiya.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2017-04-14T18:59:12.000Z","updated_at":"2017-04-14T19:00:41.000Z","dependencies_parsed_at":"2023-03-28T00:35:23.825Z","dependency_job_id":null,"html_url":"https://github.com/princiya/gridVsFlexbox","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/princiya/gridVsFlexbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princiya%2FgridVsFlexbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princiya%2FgridVsFlexbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princiya%2FgridVsFlexbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princiya%2FgridVsFlexbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/princiya","download_url":"https://codeload.github.com/princiya/gridVsFlexbox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/princiya%2FgridVsFlexbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33419555,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T22:14:44.296Z","status":"online","status_checked_at":"2026-05-24T02:00:06.296Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css3","cssgrid","flexbox"],"created_at":"2024-11-18T00:16:02.764Z","updated_at":"2026-05-24T02:32:49.298Z","avatar_url":"https://github.com/princiya.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Grid vs Flexbox - the new web layout\r\n\r\nWhen it comes to website layouts, there are a number of ways to do it - margins \u0026 paddings, tables, floats, flexbox and the newly introduced CSS Grid. Flexbox has been promising when it came to responsive design, but with CSS Grid being shipped in major browsers today, it appears to be the most powerful layout system available in CSS. Let’s try to understand this new method for web layout and how is it different from Flexbox through practical examples.\r\n\r\nI am trying to compare Flexbox vs CSS Grid using the following websites:\r\n* [FlexboxFroggy](http://flexboxfroggy.com/)\r\n* [CSSGridGarden](http://cssgridgarden.com/)\r\n\r\nThe above links are a great fun way to learn the basics of Flexbox and CSS Grid.\r\n\r\nThis repository is an attempt to compile code samples from each of the above two websites and present alternate ways of using flexbox - grid and vice-versa.\r\n\r\nHere is an example.\r\n![flex-css-grid-1](https://cloud.githubusercontent.com/assets/8022693/25053356/112bb976-2157-11e7-8316-a142af8c52fd.png)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprinciya%2Fgridvsflexbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprinciya%2Fgridvsflexbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprinciya%2Fgridvsflexbox/lists"}