Grid

Agile CSS Framework has mobile-first flexbox grid, twelve column system.

  • Create a div and add the class row.
  • Inside this div, create divisions and add the class col
1 of 2 .col
2 of 2 .col
Setting columns width

add col- with a number from 1 to 12 to set the size

1 of 2 .col-8
2 of 2 .col-4
Setting columns different width for different devices

Use col-sm- col-md- col-lg- col-xl- with any number from 1 to 12

The sum in each row must be 12,
  • -12 will make a single column
  • -6 -6 a row of two equal columns
  • -3 -6 -3 a row of three columns not equal in size

Example:
col-sm-12 shows a full width column on small devices, col-md-6 shows 2 columns on tablets, col-lg-3 shows 4 columns on desktop
Please, resize the window to see the changes on all devices.

1 of 4 col-sm-12 col-md-6 col-lg-4
2 of 4 col-sm-12 col-md-6 col-lg-4
3 of 4 col-sm-12 col-md-6 col-lg-4
4 of 4 col-sm-12 col-md-6 col-lg-4
Reorder columns on different devices

In some cases we need to show a column first on large devices but last on small devices or visa versa

  • lg-order-first will show a column first on large devices
  • lg-order-last will show a column last on large devices
1 of 2 col-sm-12 col-lg-8
1 of 2 first on large devices 2nd on small devices
Relative Width and Height
  • Add the class w-25 w-50 w-75 w-100 to set the width of any div based on the user view
  • Add the class h-25 h-50 h-75 h-100 h-150 to set the height of any div based on the user view
Note these classes could be applied to any element
← Previous Next β†’

Built with love in Ukraine πŸ‡ΊπŸ‡¦ by Kim Majali, EITO team, and contributors.