Interactive examples and demonstrations
Adaptive Density Mode automatically adjusts spacing, gaps, and padding throughout your layout based on the user's input device. Touch users get more spacious layouts, while mouse users get more compact layouts.
Get up and running in 3 minutes with our Quick Start Guide!
View Quick Start GuideThis layout automatically detects your pointer type. Try viewing this page on different devices!
Content 1
Content 2
Content 3
Use data-rsl-density to manually set the density level.
...
...
...
Density mode works seamlessly with the balanced (masonry) layout system.
Content 1
Content 2
Content 3
Sidebar margins adapt to the current density level.
Control density via JavaScript using the RSL.Density API.
// Get element
const layout = document.querySelector('.slot-layout');
// Set density manually
RSL.Density.set(layout, 'spacious');
// Get current density
const current = RSL.Density.get(layout);
console.log(current); // 'spacious'
// Reset to auto-detect
RSL.Density.reset(layout);
// Detect pointer type
const pointer = RSL.Density.detectPointer();
console.log(pointer); // 'fine' or 'coarse'
// Available density levels
console.log(RSL.Density.levels);
// { COMPACT: 'compact', STANDARD: 'standard', SPACIOUS: 'spacious' }