Click and drag in the grid builder area to visually create your grid layout. The grid will update automatically as you drag.
Adjust the number of rows, columns, and gap size using the input controls. Values are limited to 1-12 for rows/columns and 0-50px for gap.
Drag and drop the generated grid items to rearrange them. Each item can be moved to any position in the grid.
The CSS code for your grid layout is automatically generated. Click the "Copy CSS" button to copy the code to your clipboard.