Drag to resize grid columns, rows, and gaps

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
Life made easier: click and drag to customize your grid.

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
Pro tip: Hold SHIFT while resizing to match the values for the column and row gaps.

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.

Now, you can resize grid columns, rows, and gaps with a simple click and drag — right on the canvas.