gap-<number> utility class
The gap-<number> utility class sets both row and column gaps in grid and flexbox layouts using the formula gap: calc(var(--spacing) * <value>), where <value> is replaced with a number from the spacing scale.
Tailwind CSS · Utilities reference · all subjects
gap
14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
gap with arbitrary value syntax
The gap-[<value>] syntax applies gap: <value>, allowing arbitrary CSS values to be used directly.
gap-x-<number> utility class
The gap-x-<number> utility class sets only the column gap (horizontal spacing) in grid and flexbox layouts using column-gap: calc(var(--spacing) * <value>).
gap-x-px utility class
The gap-x-px utility class sets a column gap of exactly 1 pixel using column-gap: 1px;
gap-x with custom property syntax
The gap-x-(<custom-property>) syntax applies column-gap: var(<custom-property>), allowing horizontal gaps to be set using custom CSS properties.
gap-x with arbitrary value syntax
The gap-x-[<value>] syntax applies column-gap: <value>, allowing arbitrary CSS values for horizontal gaps.
gap-y-<number> utility class
The gap-y-<number> utility class sets only the row gap (vertical spacing) in grid and flexbox layouts using row-gap: calc(var(--spacing) * <value>).
gap-y-px utility class
The gap-y-px utility class sets a row gap of exactly 1 pixel using row-gap: 1px;
gap-y with custom property syntax
The gap-y-(<custom-property>) syntax applies row-gap: var(<custom-property>), allowing vertical gaps to be set using custom CSS properties.
gap-y with arbitrary value syntax
The gap-y-[<value>] syntax applies row-gap: <value>, allowing arbitrary CSS values for vertical gaps.
Basic gap example with grid
Use gap-<number> utilities like gap-2 and gap-4 to change the gap between both rows and columns in grid and flexbox layouts. Example: <div class="grid grid-cols-2 gap-4"><div>01</div><div>02</div><div>03</div><div>04</div></div>
Independent row and column gaps example
Use gap-x-<number> or gap-y-<number> utilities to change the gap between columns and rows independently. Example: <div class="grid grid-cols-3 gap-x-8 gap-y-4"><div>01</div><div>02</div><div>03</div><div>04</div><div>05</div><div>06</div></div>
gap utilities support responsive design
The gap, column-gap, and row-gap properties can be used with responsive breakpoint prefixes to apply different gap values at different screen sizes.
gap utilities support custom values
The gap, gap-x, and gap-y utilities support arbitrary custom values using the bracket notation syntax, such as gap-[10vw].