Grid layout

Grid system

The grid system provides a flexible layout foundation using CSS Grid. Basic grid classes come with built-in responsive behavior that automatically adjusts the layout based on screen size.

Basic grid classes

Basic grid classes with base column configurations:

• grid_1-col
• grid_2-col
• grid_3-col
• grid_4-col
• grid_5-col
• grid_6-col
• grid_9-col
• grid_12-col

Responsive behavior

These responsive behaviors are built into the grid classes and automatically adjust the layout based on screen size without requiring additional responsive modifiers.

Default behavior can be adjusted using responsive combo classes:

Spacing modifiers

Class structure: grid_columns-col gap-size

Size options: xsmall, small, medium, large, xlarge, xxlarge

Example: grid_3-col gap-medium

Alignment modifiers

These modifiers set alignment for all child elements inside the grid.

Class structure: grid_columns-col is-X or Y-position

Available combo classes:

• is-x-left
• is-x-center
• is-x-right
• is-y-top
• is-y-center
• is-y-bottom

Example: grid_3-col is-x-center is-y-bottom