Docs - Grid
Actually, PI theme has 2 grids. The first one is similar to bootstrap grid. The other is used in galleries, in order to have better control on galleries columns quantity. Read about gallery grid here.
Connect grid.css to use usual grid.
We have 3 grid gaps sizes. They all reduced to 50% on 2XS and less screens. Those classes have to be upplied to grid row .pi-row container.
- Default grid columns gap size - 40px
- .pi-grid-small-margins - 20px
- .pi-grid-big-margins - 64px
Screens breakpoints
| Breakpoint | Size in pixels |
|---|---|
| 3XS | < 320 |
| 2XS | 320 - 479 |
| XS | 480 - 767 |
| SM | 768 - 991 |
| MD | 992 - 1139 |
| LG | >= 1140 |
Grid rows and columns sizes classes
- .pi-row - creates grid row
- .pi-col-lg-12 - creates grid column that takes 100% of parent width on lg and larger screens.
- .pi-col-lg-11 - creates grid column that takes 11/12 of parent width on lg and larger screens.
- .pi-col-lg-10 - creates grid column that takes 10/12 of parent width on lg and larger screens.
- .pi-col-lg-9 - creates grid column that takes 9/12 of parent width on lg and larger screens.
- .pi-col-lg-8 - creates grid column that takes 8/12 of parent width on lg and larger screens.
- .pi-col-lg-7 - creates grid column that takes 7/12 of parent width on lg and larger screens.
- .pi-col-lg-6 - creates grid column that takes 6/12 of parent width on lg and larger screens.
- .pi-col-lg-5 - creates grid column that takes 5/12 of parent width on lg and larger screens.
- .pi-col-lg-4 - creates grid column that takes 4/12 of parent width on lg and larger screens.
- .pi-col-lg-3 - creates grid column that takes 3/12 of parent width on lg and larger screens.
- .pi-col-lg-2 - creates grid column that takes 2/12 of parent width on lg and larger screens.
- .pi-col-lg-1 - creates grid column that takes 1/12 of parent width on lg and larger screens.
- .pi-col-Y-X- creates grid column that takes X/12 of parent width on Y and larger screens.
The same thing for other breakpoints. Y can be one of breakpoint lg,md,sm,xs,2xs,3xs, X can be 1,2...12.
Grid columns offsetting classes
- .pi-col-Y-offset-X- creates grid column left offset that takes X/12 of parent width on Y and larger screens.
Grid columns ordering
You can even reorder columns on certain screen breakpoints. Add .col-Y-push-X to left column that should actually be at the right side on Y screen. X - should be equal other column width in this breakpoint. .col-Y-pull-X to right column that should actually be at the left side on Y screen. X - should be equal previous column width in this breakpoint
Clearfix
If the same row contain for example 4 1/6 columns for large version and 4 1/3 columns for small version, columns in large version wouldn't fit in one row. You can face any columns collapsing, overlapping bugs. You can't create 2 rows because, then would be 2 1/3 columns in each row, but not inside one. You have to insert block with .clearfix pi-visible-lg-only class, to devide 2 last columns for large version only.
