CSS Grid Layout Generator
Description & Example
Use this tool to create a custom CSS grid layout by specifying the number of rows, columns, and the gap between grid items. A live preview of the grid is provided where you can drag and drop individual items to rearrange them. The generated CSS code reflects your settings and includes a comment that shows the current order of the grid items.
For instance, below is an example of a static 3×3 grid layout with each row sized using minmax(100px, 1fr) to ensure a minimum height:
1
2
3
4
5
6
7
8
9
In this example, the grid consists of three rows and three columns with a 10px gap between each item, and each row maintains a minimum height of 100px.