Fluid Layout
Fluid Layout — Content
stretches to fill full available width, no max-width cap
What is the Fluid layout?
The content area has no maximum width constraint — it stretches to
fill all horizontal space right up to the edge of the viewport
(minus the sidebar). This is ideal for data-dense views like large
tables, wide charts, spreadsheets, or analytics dashboards where
every pixel of horizontal space counts. The single line of CSS
override is max-width: none on
.app-content.
Modifier:
data-layout="fluid"
on <html>
CSS override:
[data-layout="fluid"] .app-content { max-width: none; }
Content width: Viewport minus sidebar
(260px), minus content gutter (×2)
Best for: Wide tables, data grids,
analytics dashboards, financial reports
$284K
Total Revenue
1,842
Customers
5,219
Orders
3.42%
Conversion
Wide Data Table (fluid layout advantage)
| Order ID | Customer | Product | SKU | Category | Units | Unit Price | Subtotal | Discount | Total | Payment | Shipped | Region | Status |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| #ORD-4821 | Alice Chen | Wireless Headphones Pro | WHP-9201 | Electronics | 2 | $149.99 | $299.98 | 10% | $269.98 | Stripe | 2024-03-12 | US-West | Delivered |
| #ORD-4820 | Marcus Lee | Ergonomic Chair X3 | ECH-4400 | Furniture | 1 | $489.00 | $489.00 | 0% | $489.00 | PayPal | 2024-03-11 | US-East | In Transit |
| #ORD-4819 | Priya Shah | Standing Desk Pro | SDP-7700 | Furniture | 1 | $799.00 | $799.00 | 15% | $679.15 | Stripe | 2024-03-10 | UK | Processing |
| #ORD-4818 | James Park | 4K Webcam Ultra | WCM-2200 | Electronics | 3 | $89.99 | $269.97 | 5% | $256.47 | Apple Pay | 2024-03-10 | CA | Delivered |
| #ORD-4817 | Sofia Martinez | Noise-Cancel Earbuds | NCE-5500 | Electronics | 1 | $119.99 | $119.99 | 0% | $119.99 | Stripe | 2024-03-09 | AU | Cancelled |
All Layout Variants
Browse the full layout collection.