GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → purplecones → css-grid-playground

purplecones / css-grid-playground

Licence: other
A simple interface for experimenting with CSS Grid Layout.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Labels

cssplaygroundgridgrid-system

Projects that are alternatives of or similar to css-grid-playground

gutter-grid
A Sass flexbox based grid system that is able to replicate CSS grid-gap in IE11
Stars: ✭ 18 (-78.57%)
Mutual labels:  grid, grid-system
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+5053.57%)
Mutual labels:  grid, grid-system
Pintsize
Customisable 💪 Flexbox grid system
Stars: ✭ 330 (+292.86%)
Mutual labels:  grid, grid-system
grid-garden
Solutions to CSS Grid Garden
Stars: ✭ 79 (-5.95%)
Mutual labels:  grid, grid-system
React Rasta
React Rasta is a powerful and flexible grid system for React
Stars: ✭ 88 (+4.76%)
Mutual labels:  grid, grid-system
tb-grid
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
Stars: ✭ 19 (-77.38%)
Mutual labels:  grid, grid-system
Cssgridgenerator
🧮 Generate basic CSS Grid code to make dynamic layouts!
Stars: ✭ 3,943 (+4594.05%)
Mutual labels:  grid, grid-system
Grassy
Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.
Stars: ✭ 335 (+298.81%)
Mutual labels:  grid, grid-system
Indoorjs
Indoor mapping for floorplans using on fabricjs
Stars: ✭ 59 (-29.76%)
Mutual labels:  grid, grid-system
React Flex Ready
A Flexbox grid ready, easy to implement and customize
Stars: ✭ 23 (-72.62%)
Mutual labels:  grid, grid-system
60gs
60GS - 60 Columns Grid System based on CSS Grid Layout
Stars: ✭ 65 (-22.62%)
Mutual labels:  grid, grid-system
Griddd
A dead simple, customisable, flexbox-based griddd
Stars: ✭ 108 (+28.57%)
Mutual labels:  grid, grid-system
flexboxes
CSS flexbox framework with pure flexbox grid ability
Stars: ✭ 27 (-67.86%)
Mutual labels:  grid, grid-system
simple-grid-system
A CSS Flexbox grid system for web page . Easy to use it !!
Stars: ✭ 15 (-82.14%)
Mutual labels:  grid, grid-system
Dragact
a dragger layout system with React style .
Stars: ✭ 710 (+745.24%)
Mutual labels:  grid, grid-system
Griz
Grid library for React; Rescue the cat
Stars: ✭ 99 (+17.86%)
Mutual labels:  grid, grid-system
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (+86.9%)
Mutual labels:  grid, grid-system
Play With Docker
You know it, you use it, now it's time to improve it. PWD!.
Stars: ✭ 2,103 (+2403.57%)
Mutual labels:  playground
Tiup
A component manager for TiDB
Stars: ✭ 207 (+146.43%)
Mutual labels:  playground
Whats New In Swift 4
An Xcode playground showcasing the new features in Swift 4.0.
Stars: ✭ 1,860 (+2114.29%)
Mutual labels:  playground
View All Similar Projects ➔

CSS Grid Playground Build Status

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.

Demo

Background

CSS 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 with @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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].