Flexbox и Grid

gap

Утилиты для управления промежутками между элементами сетки и flexbox.

ClassStyles
gap-<number>
gap: calc(var(--spacing) * <value>);
gap-(<custom-property>)
gap: var(<custom-property>);
gap-[<value>]
gap: <value>;
gap-x-<number>
column-gap: calc(var(--spacing) * <value>);
gap-x-(<custom-property>)
column-gap: var(<custom-property>);
gap-x-[<value>]
column-gap: <value>;
gap-y-<number>
row-gap: calc(var(--spacing) * <value>);
gap-y-(<custom-property>)
row-gap: var(<custom-property>);
gap-y-[<value>]
row-gap: <value>;

Примеры

Базовый пример

Используйте утилиты gap-<number> типа gap-2 и gap-4 для изменения промежутка между строками и столбцами в макетах сетки и flexbox:

01
02
03
04
<div class="grid grid-cols-2 gap-4">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

Изменение промежутков между строками и столбцами независимо

Используйте утилиты gap-x-<number> или gap-y-<number> типа gap-x-8 и gap-y-4 для изменения промежутка между столбцами и строками независимо:

01
02
03
04
05
06
<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-[<value>],gap-x-[<value>], and gap-y-[<value>], чтобы задать gap на основе полностью пользовательского значения:

<div class="gap-[10vw] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: gap-(<custom-property>)

<div class="gap-(--my-gap) ...">  <!-- ... --></div>

Это просто сокращение, gap-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс утилит gap,column-gap, and row-gap с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="grid gap-4 md:gap-6 ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков