Flowkit v2.0.0Structure & Layout

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.

Grid ClassDesktopTabletMobile-LMobile
grid_1-col1 column1 column1 column1 column
grid_2-col2 columns2 columns1 column1 column
grid_3-col3 columns3 columns2 columns1 column
grid_4-col4 columns2 columns1 column1 column
grid_5-col5 columns3 columns2 columns1 column
grid_6-col6 columns3 columns2 columns1 column
grid_9-col9 columns3 columns2 columns1 column
grid_12-col12 columns3 columns2 columns1 column

Default behavior can be adjusted using responsive combo classes:

grid_3-col tablet-1-col

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