FodGrid & FodItem Examples

Container + Grid Pattern (FOD Design System)

The complete FOD pattern uses FodContainer for constrained width, FodGrid for rows, and FodItem for columns.

FodContainer MaxWidth="Lg" constrains the grid to 960px max-width with centered alignment.

Container Sizes Comparison

Different MaxWidth values constrain the container to different widths.

Basic Grid (Equal Columns)

Half Columns (6+6)

Mixed Widths (3+6+3)

All 12 Columns

Auto-width Column

GapX: None (0px)

GapX: Small (16px)

GapX: Large (32px)

Responsive Columns

Resize the browser to see the effect: 12 columns on mobile, 6 on medium, 4 on large screens.

Sidebar Layout (Responsive)

Column Offset

Column Ordering

Third column in DOM appears first visually on medium+ screens.

GapY (16px)

Vertical spacing between wrapped rows.

Justify Center

Justify Space Between

Align Items Center

Align Self

Individual column alignment overrides row's AlignItems.

Centered Card Layout

Using Justify and AlignItems together.

Nested Grid (2 Levels)

A row nested inside a column creates an independent grid context.

Nested Grids with Different GapX

Parent grid uses large gap, nested grid uses small gap.

Deep Nesting (3 Levels)

Demonstrates 3 levels of nesting with decreasing gap sizes.

Density: Comfortable vs Compact

Compact density reduces spacing for data-dense interfaces.

Comfortable (Default)

Compact

Compact Density with GapY

Compact density combined with vertical gap for wrapped rows.