Skip to content

CSS grid layout in production

parulM1992 edited this page Dec 27, 2018 · 13 revisions

I hope you are excited about a new addition to CSS supported by all major browsers. A grid layout. Our team decided to try it in our library for layouts. Having a need to support IE11 for the next 100 years and after the tone of reading and trying and testing we found something that can be used efficiently in production.

Getting started

To start playing with Powergrid tool and to check it's real power, visit the demo page. It comes up with a pre-loaded grid, so that, you can make changes and see the layout in action.

You can click on anywhere on the grid and it will open a configuration modal where you can configure the grid, see the source code and copy it.

image

Configuring your grid

You can configure the grid either using a "grid setting" tab where you will find a nice user interface that will do your job or you can go to "configure JSON" tab to configure it using a JSON.

image

Why?

To fully understand the powergrid and its uses you can go through its introduction. Powergrid can create many layouts for you, we have created some examples to show how easily we can create different layout structure.