diff --git a/the-grid.html b/the-grid.html
index ea84cbe..016ee46 100644
--- a/the-grid.html
+++ b/the-grid.html
@@ -216,7 +216,6 @@
                 super.connectedCallback();
                 this.addEventListener('dom-change', this._attachEvents);
                 this._attachEvents();
-                this.computeStyles();
             }
 
             /**
@@ -230,6 +229,7 @@
                 let addOrRemoveMoveListener = this.draggable ? 'addListener' : 'removeListener';
 
                 Array.prototype.forEach.call(this.children, child => {
+                    this.ensureSpace(child);
                     let isPlaceholder = child.hasAttribute('placeholder');
                     if (isPlaceholder) {
                         this.placeholder = child;
@@ -248,7 +248,7 @@
                         child.addEventListener('touchmove', this._safePreventDefault);
                     }
                 });
-
+                this.computeStyles();
             }
 
             /**
@@ -378,6 +378,30 @@
                     player.style.left = `${newLeft}px`;
                     player.style.top = `${newTop}px`;
 
+                    if(position.col !== +this.placeholder.getAttribute("col")
+                        || position.row !== +this.placeholder.getAttribute("row")) {
+                        /**
+                         * `dragging` event when resizer/gripper is being moved.
+                         *
+                         * @event TheGrid#dragging
+                         * @type {object}
+                         * @property {HTMLElement} grid - The grid in which the event occurred.
+                         * @property {HTMLElement} tile - The tile that has been resized.
+                         * @property {Event} sourceEvent - The original tracking event.
+                         */
+                        player.dispatchEvent(new CustomEvent('dragging', {
+                            bubbles: true,
+                            composed: true,
+                            detail: {
+                                grid: this,
+                                tile: player,
+                                col: position.col,
+                                row: position.row,
+                                sourceEvent: e
+                            }
+                        }));
+                    }
+
                     // Check for overlaps if enabled.
                     if (this.overlappable || !this._isOverlapping(position.col, position.row, cols, rows, [player])) {
                         this.placeholder.setAttribute('row', position.row);
@@ -408,7 +432,8 @@
                         composed: true,
                         detail: {
                             grid: this,
-                            tile: player
+                            tile: player,
+                            type: "move"
                         }
                     }));
                 }
@@ -484,6 +509,33 @@
                     isWidth && newWidth >= this.cellWidth && (player.style.width = `${newWidth}px`);
                     isHeight && newHeight >= this.cellHeight && (player.style.height = `${newHeight}px`);
 
+                    if(size.width !== +this.placeholder.getAttribute("width")
+                        || position.height !== +this.placeholder.getAttribute("height")) {
+                        /**
+                         * `dragging` event when resizer/gripper is being moved.
+                         *
+                         * @event TheGrid#dragging
+                         * @type {object}
+                         * @property {HTMLElement} grid - The grid in which the event occurred.
+                         * @property {HTMLElement} tile - The tile that has been resized.
+                         * @property {Event} sourceEvent - The original tracking event.
+                         */
+                        player.dispatchEvent(new CustomEvent('dragging', {
+                            bubbles: true,
+                            composed: true,
+                            detail: {
+                                grid: this,
+                                tile: player,
+                                type: "resize",
+                                col: size.col,
+                                row: size.row,
+                                width: size.width,
+                                height: size.height,
+                                sourceEvent: e
+                            }
+                        }));
+                    }
+
                     // Check for overlaps if enabled.
                     if (this.overlappable || !this._isOverlapping(position.col, position.row, size.width, size.height, [player])) {
                         let isWidthValid = this._isWithinConstraints(size.width, minWidth, maxWidth);
@@ -584,13 +636,13 @@
 
             }
             /**
-            * Checks if the given width or height as `value` is within grid constraints.
-            * @param {Number} value in grid unit.
-            * @param {Number} min in grid unit.
-            * @param {Number} max in grid unit.
-            * @return {Boolean} true when within constraints, otherwise false.
-            * @private
-            */
+             * Checks if the given width or height as `value` is within grid constraints.
+             * @param {Number} value in grid unit.
+             * @param {Number} min in grid unit.
+             * @param {Number} max in grid unit.
+             * @return {Boolean} true when within constraints, otherwise false.
+             * @private
+             */
             _isWithinConstraints(value, min = 1, max = Infinity) {
                 return value >= min && value <= max;
             }