Layouts

Layout utilities provide fine-grained control over flexbox properties, gap spacing, and alignment. They set CSS properties directly, making them straightforward to use and inspect.

Flex

Flex direction

Control the direction of flex items.

Class	Sets
.flex-column	flex-direction: column
.flex-row	flex-direction: row

Flex wrap

Class	Sets
.flex-nowrap	flex-wrap: nowrap
.flex-wrap	flex-wrap: wrap

Flex grow

Control how flex items grow to fill available space. A higher value means the item claims a proportionally larger share of the extra space.

Class	Sets
.flex-grow-0	flex-grow: 0
.flex-grow-1	flex-grow: 1
.flex-grow-2	flex-grow: 2
.flex-grow-3	flex-grow: 3
.flex-grow-4	flex-grow: 4
.flex-grow-5	flex-grow: 5

Flex shrink

Control how flex items shrink when space is limited. A higher value means the item gives up more space relative to its siblings.

Class	Sets
.flex-shrink-0	flex-shrink: 0
.flex-shrink-1	flex-shrink: 1
.flex-shrink-2	flex-shrink: 2
.flex-shrink-3	flex-shrink: 3
.flex-shrink-4	flex-shrink: 4
.flex-shrink-5	flex-shrink: 5

Tip

Use .flex-shrink-0 on items that should never shrink — elements like icons or fixed-width controls that would break at smaller sizes.

Gap

Gap utilities control the spacing between items in any flex or grid layout. They use the same spacing tokens as padding, margin, and inset utilities, keeping all spacing consistent.

.gap-none

.gap-3xs

.gap-2xs

.gap-xs

.gap-sm

.gap-md

.gap-lg

.gap-xl

.gap-2xl

.gap-3xl

.gap-4xl

.gap-5xl

.gap-6xl

.gap-7xl

.gap-8xl

.gap-9xl

.gap-10xl

.gap-11xl

.gap-12xl

.gap-13xl

.gap-14xl

.gap-15xl

.gap-16xl

.gap-17xl

.gap-18xl

Column / row gap

By default, .gap-<size> sets both column and row gap. To control each axis independently, use .col-gap-<size> or .row-gap-<size>.

Prefix	Sets	Example
gap-	gap (both axes)	.gap-lg
col-gap-	column-gap (inline axis)	.col-gap-sm
row-gap-	row-gap (block axis)	.row-gap-xl

All three accept the same size scale: none, 3xs, 2xs, xs, sm, md, lg, xl, 2xl … up to 18xl.

<!-- Tight columns, spacious rows -->
<div class="tng-group col-gap-xs row-gap-xl flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Tokens

See the full spacing tokens reference for exact values per brand.

Alignment

Alignment utilities control how items are distributed and positioned within flex and grid containers. They affect both the content (how lines or tracks are distributed) and items (how individual items sit within their allocated space).

Align content

Control how lines are distributed in a multi-line flex container (when flex-wrap is enabled) or grid tracks along the block axis.

Class	Value
.align-content-space-around	space-around
.align-content-space-between	space-between
.align-content-space-evenly	space-evenly
.align-content-baseline	baseline
.align-content-stretch	stretch
.align-content-start	start
.align-content-center	center
.align-content-end	end

Align items

Control how flex items are aligned along the cross axis (block axis in row layouts, inline axis in column layouts).

Class	Value
.align-items-baseline	baseline
.align-items-stretch	stretch
.align-items-start	start
.align-items-center	center
.align-items-end	end

Align self

Override the parent’s align-items for a single item.

Class	Value
.align-self-baseline	baseline
.align-self-stretch	stretch
.align-self-start	start
.align-self-center	center
.align-self-end	end

Justify content

Control how flex items are distributed along the main axis (inline axis in row layouts, block axis in column layouts).

Class	Value
.justify-content-space-around	space-around
.justify-content-space-between	space-between
.justify-content-space-evenly	space-evenly
.justify-content-start	start
.justify-content-center	center
.justify-content-end	end

Justify items

Set the default justification for all items in a grid container.

Class	Value
.justify-items-baseline	baseline
.justify-items-stretch	stretch
.justify-items-start	start
.justify-items-center	center
.justify-items-end	end

Justify self

Override the parent’s justify-items for a single item.

Class	Value
.justify-self-baseline	baseline
.justify-self-stretch	stretch
.justify-self-start	start
.justify-self-center	center
.justify-self-end	end

Common patterns

<!-- Horizontal nav with items centered vertically, spread apart -->
<nav class="tng-group justify-content-space-between align-items-center">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<!-- Vertical stack with items centered horizontally -->
<div class="tng-stack align-items-center gap-lg">
  <h2>Title</h2>
  <p>Description</p>
  <button class="tng-button is-primary">Action</button>
</div>

<!-- Card grid with equal-height cards -->
<div class="tng-grid gap-md align-items-stretch">
  <div class="p-md">Card 1</div>
  <div class="p-md">Card 2</div>
  <div class="p-md">Card 3</div>
</div>

Best practices

• Let layouts set display — layout components like .tng-group, .tng-stack, and .tng-grid already set display: flex or display: grid. These utilities only override the related properties — they don’t set display themselves.
• Use gap instead of margins between items — gap is simpler (no “last child” edge cases), works in both flex and grid, and uses the same token scale as all other spacing.
• Prefer align-items over align-self — set alignment once on the parent when all children should align the same way. Reserve align-self for individual exceptions.