Columns
A layout component using CSS columns for flowing content across multiple columns. Content flows naturally from one column to the next, ideal for text blocks, lists, or masonry-like layouts.
Preview & Code
_columns.html.erb
███
███████ █████████ █████████
██████
███ ██████ ████████████████████ ██ ██
████████ █████████ ████████████
█████████ █████████ ████████████
██ ███ ██
███ ██████ █████████████████████ ██████ ██ ████ ███ ██ ██
columns_component.rb
█ ██████████████████████ ████
█████ ████████████████ █ ███████████████████
██████ █ ███████████████████
████ █ ███████ ██ ██ ██████████
███ █████████████████ ██ ████ ████ ████████████████
██████ █ ███████████████████ ███
████ █ ██████████
██████████████ █ █████████████████████ ██ ██
columns_component.html.erb
████ ██████████ ███████████████ ████
███ ███████ ██
██████
Changelog
- Initial release with 1-12 column 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