Tabs

Fluid columns grid

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:

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!

Fixed-size column
Fluid column
Fixed-size column
Fluid column