Flow

A few helper classes to put elements in a row, a column or a grid, with or without centering. The -center classes center on both axes, and the -x and -y versions center on one axis only. Add .gap-1 to .gap-8 to space them out.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/flow.css" />

Default

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-center-x {
  display: flex;
  justify-content: center;
}

.flex-center-y {
  display: flex;
  align-items: center;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-col-center-x {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-col-center-y {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.grid {
  display: grid;
}

.gap-1 {
  gap: var(--ui-spacing-1);
}

.gap-2 {
  gap: var(--ui-spacing-2);
}

.gap-3 {
  gap: var(--ui-spacing-3);
}

.gap-4 {
  gap: var(--ui-spacing-4);
}

.gap-5 {
  gap: var(--ui-spacing-5);
}

.gap-6 {
  gap: var(--ui-spacing-6);
}

.gap-7 {
  gap: var(--ui-spacing-7);
}

.gap-8 {
  gap: var(--ui-spacing-8);
}

API reference

Type	Classes / attributes	What it does
Layout	`.flex` `.flex-col` `.flex-center` `.flex-center-x` `.flex-center-y` `.flex-col-center` `.flex-col-center-x` `.flex-col-center-y` `.grid`	Row, column or grid, with optional centering
Gap	`.gap-1` `.gap-2` `.gap-3` `.gap-4` `.gap-5` `.gap-6` `.gap-7` `.gap-8`	Space between children, from the spacing scale