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 →