Powergrid

About

CSS Grid layout is the latest and most powerful known layout system available in CSS. It can handle both rows and columns that's why also known as 2-dimensional sytem. It has solved many problems that we have come across or tried to hack them around using properties like positioning, floats, inline-block, etc while creating a layout.

As its a new system, it could be difficult for the newbies and also for those who are not much into CSS to create layout using CSS Grid. So we require something that helps us understand about CSS Grid and also to create a layout using it. So we have Powergrid as a solution to these problems.

Powergrid is an easy to use yet a powerful tool to readily build a cross-browser CSS Grid system. It provides a simple interface where we can create our own grid without thinking much about browser compatibility. We can also learn about CSS Grid while playing around with this tool as it also provides the source code of the built Grid.

Usage:

• Go to the demo.
• See the Grid built using default configuration.
• You can build your own customized Grid by clicking anywhere on the Grid and changing the values using json or the user interface provided on a modal.
• View the source code (HTML and CSS) of the built Grid from "View Source" option in one of the tab inside a modal and you can also copy it.
• You can also clone this repository using git clone https://github.com/ZS/powergrid.git command or download zip. And run npm install command after downloading/cloning the repository to play with powergrid.

Issues and bug reporting

Please feel free to add a bug / feature request / suggestions to the issue tracker.

Contributing to Powergrid

We love your input! And, we are really glad you're reading this, because we want to take this project to the next level with the help of enthusiast like you. We want to make contributing to this project as easy and transparent as possible. Please refer to our contribution guideline document for more details.

References

Please check our branch to get upcoming versions and features. To make you even more comfortable with Powergrid, we have created several documents for you. Please feel free to take a look,

• Examples
• Documentation
• CSS grid layout in production

Also check changelog for more detailed information about new features, bug fixes and releases.

Credits

• Wicked Elements Copyright (c) 2018, Andrea Giammarchi, @WebReflection under ISC
• Bootstrap Copyright (c) 2011-2019 Twitter, Inc. Copyright (c) 2011-2019 The Bootstrap Authors under MIT
• Highlight.js Copyright (c) 2006, Ivan Sagalaev
• JSON Editor by josdejong under Apache License 2.0
• Placeholder.com Free image placeholder service for web designers, serving billions and billions of images each year.
• Babel Copyright (c) 2014-present Sebastian McKenzie and other contributors under MIT
• Jasmine Copyright (c) 2008-2017 Pivotal Labs under MIT