`, `

`, ``, ``, ... or even your own custom element: ``. ```html

``` Each child needs **4 attributes** which define its position and size within the grid: * **col**: the column index of the top-left corner of the tile (starts from 0). * **row**: the row index of the top-left corner of the tile (starts from 0). * **width**: the column spanning of the tile as an amount of columns (~colspan). * **height**: the row spanning of the tile as an amount of rows (~rowspan). ### The grid's placeholder If you need some placeholder while dragging or resizing a tile for preview purpose, simply add a child to `` with the placeholder attribute. ```html

``` > This will enable a grey placeholder in the grid only visible while dragging and resizing tiles. ### The tile's grippers (akka resizers). If the grid has the `resizable` attribute, tiles can be resized by grabbing elements called **grippers** or **resizers**. Those elements can be of any types, they just need to have a `resize` attribute so the grid can find them. ```html

│

``` > Here, a tile is added to the grid. It has a nested **right** gripper so it can be used to resize the tile by the right edge. Resize grippers can take the following values: * **top**: resize the tile by the top edge. * **bottom**: resize the tile by the bottom edge. * **left**: resize the tile by the left edge. * **right**: resize the tile by the right edge. * **top-left**: resize the tile by the top and left edges at the same time. * **top-right**: resize the tile by the top and right edges at the same time. * **bottom-left**: resize the tile by the bottom and left edges at the same time. * **bottom-right**: resize the tile by the bottom and right edges at the same time. > Several grippers can be used for the same tile. They can be nested wherever in the tile element. ## Contributing 1. Fork it! 2. Create your feature branch: `git checkout -b my-new-feature` 3. Commit your changes: `git commit -am 'Add some feature'` 4. Push to the branch: `git push origin my-new-feature` 5. Submit a pull request :D ## History * **1.4.0:** Now handles children added on the fly + Serialization helper. * **1.3.0:** Ability to add constraints on tile size as min/max width and height. * **1.2.0:** Introduce autogrow feature and custom events. * **1.1.0:** Introduce overlappable feature. * **1.0.3:** Ability to generate grid's children with templates. * **1.0.2:** Fixes shadow dom wrapping. * **1.0.1:** Enhanced mobile support. * **1.0.0:** Initial release. ## License MIT license