RDS/Layouts

Layouts

Primitive layout building blocks — containers, stacks, grids, and flex wrappers — for composing consistent page structure using Tailwind utilities.

Tailwind CSSFlexboxCSS Grid

01Container

max-width: 1280px · px-8 · mx-auto

// RDS container — same max-width as the docs site<div className="mx-auto w-full px-8" style={{ maxWidth: 1280 }}>  {children}</div>

// RDS container — same max-width as the docs site<div className="mx-auto w-full px-8" style={{ maxWidth: 1280 }}>  {children}</div>

02Stack

VStack

HStack

03Flex

LeftRight

Label

flex-1

fixed

04Grid

col-span-3

05SimpleGrid

Auto-fills columns based on a minimum child width — no breakpoint management needed.

06Wrap

ElectronicHip-HopR&BIndieSoulJazzLo-fiAmbient

07Center

08AspectRatio

16 / 9

16:9

1 / 1

1:1

3 / 4

3:4

09Divider

One

Two

Three