Utilities
Layout
Layout utilities and patterns for building responsive interfaces with Sunsato UI.
Container
Use max-width containers to constrain content width on larger screens.
max-w-7xl (1280px)
max-w-4xl (896px)
max-w-2xl (672px)
Grid System
Use CSS Grid for complex layouts with automatic responsive behavior.
3 Columns
Column 1
Column 2
Column 3
4 Columns
Column 1
Column 2
Column 3
Column 4
Flexbox
Use Flexbox for one-dimensional layouts and alignment.
justify-between
Left
Right
items-center gap-4
Item 1
Item 2
Item 3
Spacing
Consistent spacing scale for margins and padding.
28px416px624px832px1248px1664pxMore Coming Soon 🚧
This page is a work in progress. More layout patterns and utilities will be added soon.