Layouts

Layout utilities provide fine-grained control over flexbox properties, gap spacing, and alignment. They work through custom properties, making them composable and easy to override at any scope.

Custom properties

Flex

Property	Default	Description
--tng-flex-direction	row	Main axis direction
--tng-flex-wrap	nowrap	Whether items wrap to new lines
--tng-flex-basis	auto	Default size of a flex item
--tng-flex-grow	0	How much an item grows
--tng-flex-shrink	1	How much an item shrinks

Gap

Property	Default	Description
--tng-gap	--tng-spacing-md	Uniform gap
--tng-col-gap	Falls back to --tng-gap	Column (inline) gap
--tng-row-gap	Falls back to --tng-gap	Row (block) gap

Alignment

Property	Default	Description
--tng-align-content	normal	Multi-line cross-axis alignment
--tng-align-items	normal	Item cross-axis alignment
--tng-align-self	auto	Individual item cross-axis
--tng-justify-content	normal	Main-axis content distribution
--tng-justify-items	normal	Default justify for items
--tng-justify-self	auto	Individual item main-axis

Flex

Flex direction

Control the direction of flex items.

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

Flex wrap

Class	Sets
.flex-wrap	--tng-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	--tng-flex-grow: 0
.flex-grow-1	--tng-flex-grow: 1
.flex-grow-2	--tng-flex-grow: 2
.flex-grow-3	--tng-flex-grow: 3
.flex-grow-4	--tng-flex-grow: 4
.flex-grow-5	--tng-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	--tng-flex-shrink: 0
.flex-shrink-1	--tng-flex-shrink: 1
.flex-shrink-2	--tng-flex-shrink: 2
.flex-shrink-3	--tng-flex-shrink: 3
.flex-shrink-4	--tng-flex-shrink: 4
.flex-shrink-5	--tng-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-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	Property	Example
gap-	--tng-gap (both axes)	.gap-lg
col-gap-	--tng-col-gap (inline axis only)	.col-gap-sm
row-gap-	--tng-row-gap (block axis only)	.row-gap-xl

All three accept the same size scale: none, 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="tng-box p-md">Card 1</div>
  <div class="tng-box p-md">Card 2</div>
  <div class="tng-box 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.