Tailwind Grid Generator

Visually create and customize Tailwind CSS grids. Adjust columns, gaps, and easy copy the generated code for your projects.

Grid Settings

Generated Code

Preview

Features

  • Visual Grid Builder: Adjust columns and gaps visually.
  • Tailwind Class Conversion: Automatically generates the correct `grid-cols-{n}` and `gap-{n}` classes.
  • Live Preview: See exactly how your grid will look with dummy items.
  • Copy-Paste Ready: Get clean HTML code ready to drop into your project.

How to Use

  1. Use the Columns slider to set how many columns you want (1-12).
  2. Select a Gap size from the dropdown (standard Tailwind spacing scale).
  3. Adjust the Number of Items to see how the grid wraps content.
  4. Copy the generated code from the Generated Code box.