📏 Tailwind CSS - Gap

Gap utilities in Tailwind CSS control the spacing between grid and flex items. They provide a consistent way to add gutters and spacing between child elements without using margins.

The gap property is shorthand for row-gap and column-gap, making it perfect for creating consistent spacing in both grid and flexbox layouts.

Tailwind provides gap utilities for both grid and flexbox layouts. The syntax follows the pattern gap-{size} where size can be from 0 to 96 or use spacing scale.

Tailwind offers a comprehensive range of gap sizes using the spacing scale. You can use numeric values (0-96) or spacing scale values (xs, sm, md, lg, xl, 2xl, etc.).

For more granular control, you can use separate utilities for row-gap and column-gap. This allows you to have different spacing horizontally and vertically.

Gap utilities can be applied responsively using breakpoint prefixes. This allows you to adjust spacing based on screen size for optimal layouts.

Gap utilities work seamlessly with flexbox layouts, providing consistent spacing between flex items. This is particularly useful for navigation menus, button groups, and card layouts.

Combine gap utilities with other layout utilities to create complex patterns. This includes using gap with auto-fit, auto-fill, and custom grid configurations.