https://github.com/purplecones/css-grid-playground
A simple interface for experimenting with CSS Grid Layout.
https://github.com/purplecones/css-grid-playground
css grid grid-system playground
Last synced: 8 months ago
JSON representation
A simple interface for experimenting with CSS Grid Layout.
- Host: GitHub
- URL: https://github.com/purplecones/css-grid-playground
- Owner: purplecones
- Created: 2017-03-26T04:17:53.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-30T18:07:35.000Z (about 9 years ago)
- Last Synced: 2025-04-17T13:31:15.298Z (about 1 year ago)
- Topics: css, grid, grid-system, playground
- Language: JavaScript
- Homepage: https://www.cssgridplayground.com
- Size: 568 KB
- Stars: 96
- Watchers: 1
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Grid Playground [](https://travis-ci.org/purplecones/css-grid-playground)
CSS 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.
## Background
[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.
It 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.
## Technologies Used
- CSS Grid Layouts
- create-react-app
- styled-components
- zeit.co/now