LayoutGrid gives you a responsive layout system built on a 12-column grid. Define how many columns each item spans at each screen size, and the layout shifts automatically — no media queries, no CSS wrestling.

Why Responsive Design Matters

Every application reaches users across a wide range of devices. A single layout rarely serves them all well:

Responsive design lets you write one layout that adapts to all of them.

Breakpoints cascade upward through xs → sm → md → lg → xl; unset breakpoints inherit the nearest smaller value.

The 12-Column System

LayoutGrid divides the available width into 12 equal columns. Each item declares how many columns it occupies. The columns always add up to 12 per row; items that overflow wrap to the next row automatically.

Controls.LayoutGrid
    .WithSkin(skin => skin.WithSpacing(2))
    .WithView(Controls.Html("<div style='background:#1565c0;color:white;padding:12px;text-align:center;border-radius:4px'>12 cols (100%)</div>"), s => s.WithXs(12))
    .WithView(Controls.Html("<div style='background:#1976d2;color:white;padding:12px;text-align:center;border-radius:4px'>6 cols</div>"), s => s.WithXs(6))
    .WithView(Controls.Html("<div style='background:#1976d2;color:white;padding:12px;text-align:center;border-radius:4px'>6 cols</div>"), s => s.WithXs(6))
    .WithView(Controls.Html("<div style='background:#2196f3;color:white;padding:12px;text-align:center;border-radius:4px'>4</div>"), s => s.WithXs(4))
    .WithView(Controls.Html("<div style='background:#2196f3;color:white;padding:12px;text-align:center;border-radius:4px'>4</div>"), s => s.WithXs(4))
    .WithView(Controls.Html("<div style='background:#2196f3;color:white;padding:12px;text-align:center;border-radius:4px'>4</div>"), s => s.WithXs(4))

Breakpoints: Adapting to Screen Size

A breakpoint is a screen-width threshold where the layout can change. LayoutGrid provides five, matching standard Material Design conventions:

Cascading upward. Settings inherit toward larger breakpoints. Setting .WithMd(4) applies to medium screens and every larger size unless you explicitly override it with .WithLg() or .WithXl().

Designing for Small Screens (Smartphones)

Mobile screens are narrow. The guiding principle is stack first: make every item full-width on extra-small screens with WithXs(12), then introduce side-by-side columns as the screen grows.

Key guidelines:

• Stack vertically — WithXs(12) ensures nothing squeezes awkwardly.
• Prioritize content — the most important information should appear at the top.
• Touch-friendly targets — buttons and links need enough tap area.

Controls.LayoutGrid
    .WithSkin(skin => skin.WithSpacing(2))
    .WithView(Controls.Html("<div style='background:#2e7d32;color:white;padding:16px;border-radius:4px'><b>Primary Content</b><br/>Full width on mobile</div>"), s => s
        .WithXs(12)    // Full width on phones
        .WithMd(8))    // 2/3 width on tablets+
    .WithView(Controls.Html("<div style='background:#388e3c;color:white;padding:16px;border-radius:4px'><b>Sidebar</b><br/>Below on mobile, side on tablet</div>"), s => s
        .WithXs(12)    // Full width on phones (stacks below)
        .WithMd(4))    // 1/3 width on tablets+ (appears beside)

Designing for Medium Screens (Tablets)

Tablets offer enough room for two-column layouts and are often used in both portrait and landscape orientations. A 3 + 9 or 4 + 8 split works well for navigation-plus-content patterns.

Key guidelines:

• Two-column layouts — ideal for master-detail or nav-plus-content views.
• Flexible splits — 6 + 6, 4 + 8, 3 + 9 all fit naturally.
• Consider orientation — portrait is meaningfully narrower than landscape.

Controls.LayoutGrid
    .WithSkin(skin => skin.WithSpacing(3))
    .WithView(Controls.Html("<div style='background:#1565c0;color:white;padding:20px;border-radius:4px;min-height:80px'><b>Navigation</b></div>"), s => s
        .WithXs(12)    // Full width on phone
        .WithMd(3))    // Narrow sidebar on tablet
    .WithView(Controls.Html("<div style='background:#1976d2;color:white;padding:20px;border-radius:4px;min-height:80px'><b>Main Content Area</b><br/>Most of the screen on tablet</div>"), s => s
        .WithXs(12)    // Full width on phone
        .WithMd(9))    // Wide main area on tablet

Designing for Large Screens (Desktops)

Desktop users have space to spare — use it to show more information at once without overwhelming them. Card grids and multi-column panels shine here, but be mindful that very wide text lines are harder to read.

Key guidelines:

• Multi-column layouts — show collections in 3 or 4 column grids.
• Card grids — a classic 1 → 2 → 4 progression scales cleanly across sizes.
• Don't overstretch — constrain maximum reading width for text-heavy sections.

Controls.LayoutGrid
    .WithSkin(skin => skin.WithSpacing(2))
    .WithView(Controls.Html("<div style='background:#7b1fa2;color:white;padding:16px;border-radius:4px'>Card 1</div>"), s => s
        .WithXs(12).WithSm(6).WithLg(3))  // 1 col -> 2 cols -> 4 cols
    .WithView(Controls.Html("<div style='background:#7b1fa2;color:white;padding:16px;border-radius:4px'>Card 2</div>"), s => s
        .WithXs(12).WithSm(6).WithLg(3))
    .WithView(Controls.Html("<div style='background:#7b1fa2;color:white;padding:16px;border-radius:4px'>Card 3</div>"), s => s
        .WithXs(12).WithSm(6).WithLg(3))
    .WithView(Controls.Html("<div style='background:#7b1fa2;color:white;padding:16px;border-radius:4px'>Card 4</div>"), s => s
        .WithXs(12).WithSm(6).WithLg(3))

Common Responsive Patterns

These three patterns cover the majority of real-world layouts.

Dashboard Cards

Items flow from a single column on phones to a four-column grid on wide monitors:

Controls.LayoutGrid
    .WithSkin(skin => skin.WithSpacing(3))
    .WithView(metricCard1, s => s.WithXs(12).WithSm(6).WithLg(3))  // 1 -> 2 -> 4 columns
    .WithView(metricCard2, s => s.WithXs(12).WithSm(6).WithLg(3))
    .WithView(metricCard3, s => s.WithXs(12).WithSm(6).WithLg(3))
    .WithView(metricCard4, s => s.WithXs(12).WithSm(6).WithLg(3))

Sidebar + Content

A narrow navigation sidebar that stacks below the content on mobile:

Controls.LayoutGrid
    .WithView(sidebar, s => s.WithXs(12).WithMd(3))   // Full width then sidebar
    .WithView(content, s => s.WithXs(12).WithMd(9))   // Full width then main

Equal Thirds

Three equal columns that stack vertically on mobile and spread out on tablet and above:

Controls.LayoutGrid
    .WithView(col1, s => s.WithXs(12).WithMd(4))  // Stack on mobile, thirds on tablet+
    .WithView(col2, s => s.WithXs(12).WithMd(4))
    .WithView(col3, s => s.WithXs(12).WithMd(4))

Grid Configuration

Control the container itself via .WithSkin():

Item Configuration

Each item added with .WithView(content, skin => ...) accepts these sizing methods:

cols is an integer from 1 to 12. Items with no explicit size for a breakpoint inherit from the next smaller breakpoint that is set.

See Also

• Container Control — Stack, Tabs, Toolbar
• DataGrid — Tabular data display