{"id":15499368,"url":"https://github.com/purplecones/css-grid-playground","last_synced_at":"2025-10-17T09:06:26.559Z","repository":{"id":136373600,"uuid":"86206893","full_name":"purplecones/css-grid-playground","owner":"purplecones","description":"A simple interface for experimenting with CSS Grid Layout.","archived":false,"fork":false,"pushed_at":"2017-05-30T18:07:35.000Z","size":582,"stargazers_count":96,"open_issues_count":1,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-17T13:31:15.298Z","etag":null,"topics":["css","grid","grid-system","playground"],"latest_commit_sha":null,"homepage":"https://www.cssgridplayground.com","language":"JavaScript","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/purplecones.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-03-26T04:17:53.000Z","updated_at":"2025-03-03T15:04:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"c88bfaa4-5508-4341-9c69-0d52f2a9b09d","html_url":"https://github.com/purplecones/css-grid-playground","commit_stats":{"total_commits":53,"total_committers":2,"mean_commits":26.5,"dds":0.05660377358490565,"last_synced_commit":"474154fde1526a3ced5d79002c670927a16bc751"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purplecones%2Fcss-grid-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purplecones%2Fcss-grid-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purplecones%2Fcss-grid-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purplecones%2Fcss-grid-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/purplecones","download_url":"https://codeload.github.com/purplecones/css-grid-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250332418,"owners_count":21413204,"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","grid-system","playground"],"created_at":"2024-10-02T08:52:09.444Z","updated_at":"2025-10-17T09:06:21.519Z","avatar_url":"https://github.com/purplecones.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Grid Playground [![Build Status](https://travis-ci.org/purplecones/css-grid-playground.svg?branch=master)](https://travis-ci.org/purplecones/css-grid-playground)\n\nCSS Grid Playground lets you visually play with _Grid Container_ and _Grid Item_ elements in the browser to quickly sketch up a layout for your site. The layout changes instantly as you update the corresponding CSS giving you instant feedback.\n\n![Demo](demo.gif)\n\n## Background\n[CSS Grid Layout](https://www.w3.org/TR/css3-grid-layout/) is fast becoming the best way to design modern website layouts. I knew I wanted to learn more about this new framework and it just so happened that General Assembly was hosting a [workshop](https://generalassemb.ly/education/how-css-grid-is-reinventing-webpage-design) with [@jensimmons](https://twitter.com/jensimmons) in NYC. The workshop was awesome and very informative.\n\nIt inspired me to create this tool that allows you to directly play with the new `grid` properties on the Grid Container or the Grid Items and see how they alter the grid structure. It helps me to learn CSS Grid better by being visual and responsive to CSS changes.\n\n## Technologies Used\n- CSS Grid Layouts\n- create-react-app\n- styled-components\n- zeit.co/now\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpurplecones%2Fcss-grid-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpurplecones%2Fcss-grid-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpurplecones%2Fcss-grid-playground/lists"}