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
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
Gap
Add classes gap, gap-2, gap-3, gap-4 to set the gap between columns, remember that gap adds margin so the sum of the columns in a row must be less than 12 to avoid wrapping
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
child-p
Add classes child-p, child-p-2, child-p-3, child-p-4 to set padding on child elements
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
