Grid Layouts¶

Grid layouts help organize content in responsive columns. They automatically adapt to different screen sizes.

Two Column Layout¶

Left Column

Content in the left column of a two-column grid layout.

Right Column

Content in the right column of a two-column grid layout.

Three Column Layout¶

1

Column One

2

Column Two

3

Column Three

Four Column Layout¶

A

First

B

Second

C

Third

D

Fourth

Asymmetric Grid Layouts¶

2/3 + 1/3 Split¶

Main Content (2/3)

This column takes up two-thirds of the available space. Perfect for main content areas.

Sidebar (1/3)

This column takes up one-third of the space.

1/4 + 3/4 Split¶

Nav

Narrow column for navigation

Content Area

Wide column for main content display with plenty of room for detailed information.

Responsive Grid¶

This grid automatically adjusts from 4 columns on desktop to 2 on tablet to 1 on mobile:

4

Responsive

2

Flexible

1

Adaptive

0

Dynamic

Nested Grids¶

Parent Grid - Left

Nested 1

Nested 2

Parent Grid - Right

Full Width Nested

Grid with Gap Variations¶

Small Gap (10px)¶

Small

Gap

Grid

Medium Gap (20px)¶

Medium

Gap

Grid

Large Gap (30px)¶

Large

Gap

Grid

Best Practices¶

Responsive Design: Use phantom-grid-auto class for automatic responsive grids
Gap Sizing: Use gap variation classes (phantom-grid-gap-sm, phantom-grid-gap-md, phantom-grid-gap-lg) for consistent spacing