For this example, we have merged and compiled Pico design system with the Bootstrap grid system (Source code here).
This allows to use the powerful Boostrap grid system to build layouts with: Auto-columns, Responsive classes, Alignment, Reordering and Nesting.
1
2
3
4
5
6
7
8
9
10
11
12
This grid example displays:
- 1 column on extra small devices
<576px - 2 columns on small devices
≥576px - 3 columns on medium devices
≥768px - 4 columns on large devices
≥992px - 6 columns on extra large devices
≥1200px