We already have on-canvas controls for defining your grid in Webflow, but (as we mentioned in our grid release notes) we’re taking this direct, on-canvas manipulation one step further.
Now, you can define and customize your grid — all without leaving the canvas. Simply click and drag to resize rows, columns, and gaps in your grid container.
![Click and drag to customize your grid](https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c53e_R4qkYmb5qKRYCiQ8thVttnjPaPAKjFy5HBHucb17TSt7wXLqTghJm1lWk_IQPDbzx1-tbzw6udSB49824feWob7LElBpERCWd3oj9F7yCXDdqvFHWJeU8yxae80XB0vHgGX5KDKs.gif)
And for you advanced peeps, a quick tip: hold SHIFT while dragging gaps to match the size value for rows and columns.
![Hold shift while resizing to match the values for the column row gaps](https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21c57c_d_H0eIwpn_JcLDHvlu7fViaXrDqYSoNZwCjdG-iOr7cLIbCVne73DLqSXY96EddfP4EhQStewiJv4-Iq-i48OeTYCHvC8mVbVN6Lk4O6AlZC_pNfbWYwWehW9O3Zul5GLM00kPnJ.gif)
All of this on-canvas grid control means that you can spend more time working with your grid on the visual canvas — and less time in the styles panel.
And with that, you’re grid to go.