Build responsive, flexible grid layouts with the V2 JSON API
A simple responsive grid that changes column count at different breakpoints. Resize your browser to see the columns adjust.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "basic-grid",
breakpoints: { xs: 1, sm: 2, md: 3, lg: 4 },
gap: "1rem",
items: [
{ content: { type: "text", value: "Item 1" } },
{ content: { type: "text", value: "Item 2" } },
{ content: { type: "text", value: "Item 3" } },
{ content: { type: "text", value: "Item 4" } },
{ content: { type: "text", value: "Item 5" } },
{ content: { type: "text", value: "Item 6" } }
]
});Items can span multiple columns using the grid.span property. Supports responsive spans per breakpoint.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "spanning-grid",
breakpoints: { xs: 1, sm: 2, md: 4 },
gap: "1rem",
items: [
{
// Spans 2 columns on md+ screens
grid: { span: { xs: 1, md: 2 } },
classes: ["highlight"],
content: { type: "text", value: "Spans 2 cols on MD+" }
},
{ content: { type: "text", value: "Item 2" } },
{ content: { type: "text", value: "Item 3" } },
{
// Full width on all screens
grid: { span: { xs: "all" } },
classes: ["alt"],
content: { type: "text", value: "Full Width (spans all)" }
},
{ content: { type: "text", value: "Item 5" } },
{ content: { type: "text", value: "Item 6" } }
]
});Auto-fit creates a truly fluid grid that automatically adjusts the number of columns based on available space. Each column has a minimum width.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "autofit-grid",
breakpoints: { xs: 1 }, // Single column wrapper
items: [
{
content: {
type: "grid",
autoFit: "200px", // Min column width
gap: "1rem",
items: [
{ text: "Auto Item 1" },
{ text: "Auto Item 2" },
{ text: "Auto Item 3" },
{ text: "Auto Item 4" },
{ text: "Auto Item 5" },
{ text: "Auto Item 6" }
]
}
}
]
});Use predefined layout patterns like "holy-grail" for semantic layouts. Items are assigned to named areas.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "areas-grid",
breakpoints: { xs: 1 }, // Single column wrapper
items: [
{
content: {
type: "grid",
layoutPattern: "holy-grail",
gap: "1rem",
items: [
{ grid: { area: "header" }, text: "Header" },
{ grid: { area: "sidebar" }, text: "Sidebar" },
{ grid: { area: "content" }, text: "Main Content" },
{ grid: { area: "aside" }, text: "Aside" },
{ grid: { area: "footer" }, text: "Footer" }
]
}
}
]
});
// Available patterns: stacked, holy-grail, sidebar-left,
// sidebar-right, app-shell, dashboardGrids can be nested inside grid items for complex layouts. Use nested: true for proper CSS class handling.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "nested-grid",
breakpoints: { xs: 1, md: 2 },
gap: "1.5rem",
items: [
{
content: {
type: "grid",
nested: true, // Uses nested-slot-layout class
cols: { xs: 2 },
gap: "0.5rem",
items: [
{ text: "Nested 1" },
{ text: "Nested 2" },
{ text: "Nested 3" },
{ text: "Nested 4" }
]
}
},
{ content: { type: "text", value: "Regular Item" } },
{ content: { type: "text", value: "Regular Item" } },
{
content: {
type: "grid",
nested: true,
cols: { xs: 3 },
gap: "0.5rem",
items: [
{ text: "A" },
{ text: "B" },
{ text: "C" }
]
}
}
]
});Wrap grids in different container types: fixed-width, fluid, full-width, or flex.
// Fixed-width container (centered, max-width constrained)
RSL.JSONLayout.renderLayout('#container', {
version: 2,
breakpoints: { xs: 1 }, // Single column wrapper
items: [{
content: {
type: "grid",
container: true, // or "container"
cols: { xs: 1, md: 3 },
gap: "1rem",
items: [...]
}
}]
});
// Container options:
// container: true - Fixed-width centered container
// container: "fluid" - Full-width with padding
// container: "full" - Full-width no padding
// container: "flex" - Flexbox-based containerComplete reference for grid configuration options.
// Grid Content Type Configuration
{
type: "grid",
// COLUMN CONFIGURATION
// Option 1: breakpoints object
breakpoints: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 },
// Option 2: shorthand cols
cols: { xs: 1, md: 2, lg: 4 },
// SPACING
gap: "1rem", // Gap between items
// FLUID GRIDS (auto-fit/auto-fill)
autoFit: "250px", // Min column width, columns expand
autoFill: "250px", // Min column width, keeps empty cols
// Valid values: "150px", "200px", "250px", "300px", "350px", "400px"
// CSS SUBGRID
autoRows: "auto", // Enable row sizing for subgrid children
// NAMED GRID AREAS
layoutPattern: "holy-grail", // Predefined pattern
// Patterns: stacked, holy-grail, sidebar-left, sidebar-right, app-shell, dashboard
// Responsive patterns
layoutPatternBreakpoints: { xs: "stacked", md: "holy-grail" },
// CONTAINER WRAPPER
container: true, // Fixed-width container
container: "fluid", // Full-width with padding
container: "full", // Full-width no padding
container: "flex", // Flexbox container
// NESTED GRIDS
nested: true, // Use nested-slot-layout/nested-slot-item classes
// STYLING
classes: ["custom-class"],
style: { background: "#f0f0f0" },
// ITEMS
items: [
{
// Item content (shorthand or full)
text: "Simple text",
html: "<strong>HTML</strong>",
content: { type: "card", title: "Card" },
// Item-level grid positioning
grid: {
// Column spanning (responsive)
span: { xs: 1, md: 2, lg: 3 },
span: 2, // Same span for all
span: "all", // Full width
// Grid area assignment
area: "header", // For named areas
// Subgrid options
subgrid: "rows", // "rows" | "columns" | "both"
rowSpan: 4, // Span multiple rows
},
// Item styling
classes: ["card"],
style: { padding: "1rem" }
}
]
}