Placing items on the grid

Now let's see how we can place the items/cells on the grid. In powergrid we mainly have four properties for an item to be placed in the grid created: column start, column span, row start, and row span. But before placing the items we need a grid structure i.e no. of rows and columns as well their size specification. To edit or configure the grid, we have a nice interface or we can also configure it using JSON. This can be done by clicking anywhere in the grid. You can select the number of rows, columns and their respective sizes to form a grid structure. After having a grid structure, we now require to place items/cells in that grid. From the same interface we can select the number of cells/items to be placed in the grid and then after choosing a particular cell we can set its following properties:

• Column Start: This specifies a grid item’s start position within the grid columns.
• Column Span: This specifies the number of columns a cell should occupy.
• Row Start: This specifies a grid item’s start position within the grid rows.
• Row Span: This specifies the number of rows a cell should occupy.

Other than above properties we can also align and justify the item according to our need. Stretch, Start, End, and Center are the values that can be assigned to align and the justify property of the cell. Also if we have case where the cells are overlapping each other, we can set its order and decide which cell should be seen in that case.