Grid
A layout component using CSS Grid for explicit column layouts. Each child element occupies a grid cell, ideal for card layouts, dashboards, and structured content.
Preview & Code
_grid.html.erb
███
████ █████████ █████████
██████
███ ██████ █████████████████ ██ ██
█████████ ███████
█████████ ███████
█████████ ███████
██ ███ ██
grid_component.rb
█ ██████████████████████ ████
█████ █████████████ █ ███████████████████
████ █ ███████████████████
████ █ ███████ ██ ██ ██████████
███ ████████████████ ██ ████ ████ ████████████████
█████ █ ██████████████████ ███
████ █ ██████████
██████████████ █ █████████████████████ ██ ██
grid_component.html.erb
████ ██████████ ████████████ ████
███ ███████ ██
██████
Changelog
- Initial release with 1-12 column grid support
- Configurable gap sizes
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now