Layout examples
Don't forget to delete this page before it goes to production :-)
Auto-Grid
Customization
--auto-grid-min-size: 16rem;
--auto-grid-max-columns: infinity; (--> no max columns)
--auto-grid-gap: 1rem;
--auto-grid-gap-vertical: (defaults to --auto-grid-gap)
Centerflex
Customization
--centerflex-threshold: 50rem;
--centerflex-gap: 1rem;
--centerflex-gap-vertical: (defaults to --centerflex-gap)
Cluster
Customization
--cluster-justification: flex-start;
--cluster-gap: 1rem;
--cluster-gap-vertical: (defaults to --cluster-gap)
One
Two
3
4
Fiiiiiive
Sechs
Grid switcher
Customization
--gs-columns-small: 1;
--gs-columns-medium: 2;
--gs-columns-large: 4;
--gs-bp-medium: 25rem;
--gs-bp-large: 50rem;
--gs-gap: 1rem;
--gs-gap-vertical: (defaults to --gs-gap)
Sidebar (sidebar-left and sidebar-right)
Customization
--sidebar-width: 20rem;
--sidebar-threshold: 50%;
--sidebar-gap: 1rem;
--sidebar-gap-vertical: (defaults to --sidebar-gap)