Home
This wiki is the main source of documentation for people using (or contributing to) the Powergrid project. If this is your first time hearing about Powergrid, we recommend using our demo page to get an idea about the project.
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.
Powergrid is a tool using which anyone having little bit knowledge about HTML/CSS can create a grid layout. It also helps to learn about CSS grid system while playing with this tool. Let us tell you a bit about CSS Grid first.
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.
But as it is a new system, it is quite difficult to make a proper layout using this without having a prior experience or practice on CSS Grid. That's why we have developed Powergrid which will help you to create a structure for your layout using CSS grid.
One of the main problems with CSS grid is the browser compatibility. You will have your work cut out to make the consistent layout with CSS Grid in different browsers. And requires considerable mental effort while working with IE. But while using Powergrid you don't need worry about such issues as it handles all such things for you. Please go through our approach if you are curious to know how Powergrid handles this.
Also if you are totally new to CSS/HTML or grid systems, then also you don't need to worry as Powergrid provides a user interface to configure(or create) a layout. After creating creating a layout, you can get its HTML and CSS within this tool only.
Another thing with the grid is that it itself is invisible till the content(elements) are added into it. Although Firefox provides a cool tool for inspecting the grid but with the PowerGrid its more easy to check the layout with nice visuals. Go through our examples for getting a better idea about this.