A powerful tool that helps you visually create and customize CSS grid layouts using Tailwind's utility classes. Perfect for both beginners and experienced developers who want to quickly build responsive grid systems.
Use Grid for 2-dimensional layouts (rows AND columns), and Flexbox for 1-dimensional layouts (either rows OR columns). This tool is ideal for complex page layouts, image galleries, and card-based designs.
Grid flow determines how items are placed in the grid. Row flow (default) fills horizontally then moves to the next row, while column flow fills vertically then moves to the next column.
Use the responsive gap controls to adjust spacing at different breakpoints. Combine with Tailwind's responsive grid-cols-* classes in the custom class input for fully responsive layouts.
Justify-content controls horizontal alignment of the entire grid content, while align-items controls vertical alignment within each grid cell. Use these to fine-tune your layout's spacing and positioning.
The custom classes input allows you to add any Tailwind utility classes for additional styling like padding, margins, or responsive behavior. These classes will be merged with the generated grid classes.