Create responsive, drag-and-drop grid layouts with resizable, removable items and customizable labels.
Instructions
Set Grid Parameters: Enter the desired number of columns, rows, and gap size using
the input fields at the top. The grid updates automatically as you adjust these values.
Add Grid Items: In any empty cell, click the "+" button to add a new grid
item. Each item appears with a default name that you can edit directly.
Drag and Drop: Click and drag any grid item (avoiding its label and control
handles) to reposition it within the grid. The item's new position updates based on where you drop
it.
Resize Grid Items: Use the resize handle located at the bottom-right corner of a
grid item to adjust its size. The item will expand to cover multiple grid cells as you drag.
Remove Grid Items: Click the red cross (×) in the top-right corner
of a grid item to remove it from the layout.
Generate Code: Click the "Generate Code" button to view the HTML and CSS code for
your current grid layout, including each item’s position, span, and custom name.
Reset Grid: Use the "Reset" button to clear all grid items and start over with a
fresh layout.