Tailwind CSS Grid Generator

Use responsive prefixes with grid-cols: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4. This gives 1 column on mobile, 2 on small screens, and 4 on large screens. Combined with gap-4 for spacing, this pattern handles most responsive layout needs without writing custom CSS.

This uses Tailwind's arbitrary value syntax to define a fluid grid that automatically creates as many columns as fit, each at least 200px wide. auto-fill fills the row with as many columns as possible (even empty ones), while auto-fit collapses empty columns. Combined with minmax, this creates a responsive layout without breakpoint-specific classes.

Use col-span-{n} classes: col-span-2 makes an item span 2 columns, col-span-full makes it span all columns. For rows, use row-span-{n}. These can also be responsive: sm:col-span-2 lg:col-span-3. Start position can be set with col-start-{n}.

gap sets both row and column gaps equally. gap-x sets only horizontal (column) gaps. gap-y sets only vertical (row) gaps. For example, gap-x-4 gap-y-8 creates narrower horizontal gaps than vertical ones — useful for card layouts where items need more vertical breathing room.

Use grid for two-dimensional layouts (rows AND columns), equal-height rows, and complex spanning. Use flex for one-dimensional layouts (row OR column), content-sized items that wrap, and navigation bars. Grid is better for page layouts and card grids; flex is better for inline components and spacing within a row.