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.

2
8px
4
16px
6
24px
8
32px
12
48px
16
64px

More Coming Soon 🚧

This page is a work in progress. More layout patterns and utilities will be added soon.