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:
grid_3-col tablet-1-colSpacing 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