The template includes a complete CSS grid set, with 12 fluid columns and a simple syntax:
1 col
11 cols
2 cols
10 cols
3 cols
9 cols
4 cols
8 cols
5 cols
7 cols
6 cols
6 cols
7 cols
5 cols
8 cols
4 cols
9 cols
3 cols
10 cols
2 cols
11 cols
1 col
12 cols
Nothing special, huh? But using fluid columns on a responsive design can lead to really, really tiny columns on mobile screens, thus making them useless. The good news is there is also a set of classes to define columns size for each responsive width, so you can finely craft how your columns and content will look for each size:
Mobile (both portrait and lanscape)
Mobile - portrait
Mobile - landscape
Tablet and small screen
Wide screen
For instance, look at these columns below on a wide screen, then resize your browser window to see how they break into multiple rows and resize to always fit the available space while preserving the aspect ratio:
1 col
1 col
2 cols
3 cols
5 cols
Fixed columns
Two fixed-size columns styles are available, and are responsive too: on smaller screens, the fixed-size column is stacked on top of the fluid one - try resizing your browser to see it in action!
Hello