Gap
Utilities for controlling gutters between grid rows and columns
Class reference
Gap
Use .gap-{size}
to change the gutter size in grid layouts.
Changing row and column gaps independently
Use gap-x-{size}
and gap-y-{size}
to change the gap between rows and columns independently.
Responsive
To control the gap at a specific breakpoint, add a {screen}:
prefix to any existing gap utility. For example, use md:gap-6
to apply the gap-6
utility at only medium screen sizes and above.
<div class="grid gap-4 md:gap-6 ...">
<!-- ... -->
</div>
For more information about Elements’ responsive design features, check out the Responsive Design documentation.
On this Page
v1.13.5