Repel

Repel adds as much inline space as possibe between two grid items, so that 100% of the inline space has been filled. When space doesn’t permit, items will wrap, appearing as block elements.

Add the .repel class to site headers, site footers or anywhere you want to push two items away from each other.

Use data-nowrap to prevent items from wrapping when space no longer permits.

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-l));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}