The Layout System

Stack vs. Flexbox

What a developer writes in CSS:

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.user-info { display: flex; flex-direction: row; gap: 0.5rem; align-items: center; } ```

What a developer writes in FLIN:

<Stack gap={4}>...</Stack>
<Stack direction="horizontal" gap={2} align="center">...</Stack>

Same result. No CSS file. No class names. No mental model of flex properties.

Grid: Two-Dimensional Layout

For layouts that need rows and columns, Grid provides a CSS Grid-based layout:

// Simple 3-column grid
<Grid cols={3} gap={4}>
    <Card>One</Card>
    <Card>Two</Card>
    <Card>Three</Card>
    <Card>Four</Card>
    <Card>Five</Card>
    <Card>Six</Card>
</Grid>

// Responsive grid {for product in products} {/for} ```

The responsive variant uses breakpoint-prefixed props. cols={1} is the mobile default (one column). cols_md={2} activates at the medium breakpoint (768px). cols_lg={3} at 1024px. cols_xl={4} at 1280px.

Grid handles the responsive CSS automatically:

/* Generated CSS (the developer never sees this) */
.grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}
@media (min-width: 768px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .grid { grid-template-columns: repeat(4, 1fr); }
}

Four lines of FLIN instead of twelve lines of CSS. And the FLIN version is readable without knowing CSS Grid syntax.

Flex: Fine-Grained Control

When Stack and Grid are not enough, Flex provides direct access to flexbox properties:

<Flex direction="row" wrap="wrap" justify="space-between" align="center">
    <Logo />
    <Nav />
    <UserMenu />
</Flex>

Flex exposes the full flexbox API through props: - direction: row, column, row-reverse, column-reverse - wrap: nowrap, wrap, wrap-reverse - justify: start, center, end, space-between, space-around, space-evenly - align: start, center, end, stretch, baseline - gap: spacing token value

Most layouts do not need Flex. Stack handles vertical and horizontal arrangements. Grid handles two-dimensional layouts. Flex is for the 10% of cases where you need justify-content: space-between or flex-wrap: wrap.

Split: Sidebar Layouts

The Split component creates a two-panel layout with a fixed ratio:

<Split ratio="1:3">
    <aside>Sidebar content</aside>
    <main>Main content</main>
</Split>

... ...

```

The ratio prop defines how space is divided between the two children. "1:3" means the first child gets 25% and the second gets 75%. "1:4" means 20% and 80%. "1:1" means 50/50.

Split handles the responsive collapse automatically: on mobile (below the medium breakpoint), the two panels stack vertically, each taking 100% width. On desktop, they sit side by side at the specified ratio.

Box: The Primitive

Box is the base layout component. It is a div with style props:

<Box padding={4} margin={2} bg="white" radius="md" shadow="sm">
    Content here
</Box>

Box accepts every spacing, color, and visual prop that other components use internally. It is the escape hatch for one-off layouts that do not fit the patterns of Stack, Grid, or Split.

Most developers rarely use Box directly. The higher-level components (Card, Alert, Badge) are boxes with specific visual treatment. Box exists for the cases where you need "a div with some padding and a shadow" without creating a new component.

Center: The Solved Problem

<Center>
    <Spinner size="lg" />
    <Text>Loading...</Text>
</Center>

Center centers its children both horizontally and vertically. It applies display: flex; align-items: center; justify-content: center -- the three properties that solve the "centering a div" problem. The optional height prop sets the container height (useful for full-viewport centering).

Divider and Spacer

// Horizontal divider
<Divider />
<Divider label="Or continue with" />

// Vertical divider in a horizontal stack Option A Option B

// Fixed-size spacer

// Flexible spacer (pushes content to edges) ```

Divider renders a visual separator line. It can be horizontal (default) or vertical, and it can contain a label (centered text on the line).

Spacer creates empty space. With a size prop, it adds fixed space. Without props, it grows to fill available space -- the flexbox flex-grow: 1 pattern that pushes siblings to opposite ends.

AspectRatio

<AspectRatio ratio="16:9">
    <Image src={video_thumbnail} />
</AspectRatio>

```

AspectRatio constrains its child to a specific aspect ratio. The ratio prop accepts common formats: "16:9", "4:3", "1:1", "21:9". This is essential for responsive images and video embeds that need to maintain their proportions as the container resizes.

Wrap

<Wrap gap={2}>
    {for tag in tags}
        <Tag>{tag}</Tag>
    {/for}
</Wrap>

Wrap arranges children in a row, wrapping to the next line when they exceed the container width. It is display: flex; flex-wrap: wrap with a gap. Perfect for tag lists, chip groups, and any collection of elements that should flow like text.

Composing Layout Components

The real power of the layout system emerges when components compose:

<Container size="xl">
    <Stack gap={8}>
        <!-- Page header -->
        <Stack direction="horizontal" align="center">
            <Stack gap={1}>
                <Text size="2xl" weight="bold">Dashboard</Text>
                <Text color="muted">Overview of your application</Text>
            </Stack>
            <Spacer />
            <Button variant="primary">Export</Button>
        </Stack>

Revenue Trend Recent Orders ```

This is a complete dashboard layout. Container constrains the width. Stack provides vertical spacing. Grid creates responsive columns. No CSS file. No class names. No media queries. The layout is expressed entirely through component composition, and it is responsive by default.

Why Components Instead of CSS Classes

Tailwind CSS takes the approach of utility classes:

fn render_grid(props: &Props) -> String {
    let cols = props.get_int("cols", 1);
    let gap = props.get_spacing("gap", 4);