Docs - Galleries
We thin about galleries element, as about special grid. Actually we have images.css and portfolio.css so galleries could be implemented with that styles and for example with usual grid. Read about usual grid here. We created new grid for images, to control better columns quantity inside one gallery. It has also special modifyers classes, that could be applied for galleries grid.
Connect galleries.css to use galleries grid.
We have 3 galleries grid gaps sizes. They all reduced to 50% on 2XS and less screens. Those classes have to be applied to main gallery container .pi-gallery. Gallery cells should have .pi-gallery-item class.
- Default grid columns gap size - 40px
- .pi-gallery-small-margins - 20px
- .pi-gallery-big-margins - 50px
- .pi-stacked no cells gaps
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-gallery - creates gallery grid
- .pi-gallery-item - creates gallery grid cell
- .pi-liquid-col-lg-1 - creates grid column that takes 100% of parent width on lg and larger screens.
- .pi-liquid-col-lg-2 - creates grid column that takes 1/2 of parent width on lg and larger screens.
- .pi-liquid-col-lg-3 - creates grid column that takes 1/3 of parent width on lg and larger screens.
- .pi-liquid-col-lg-4 - creates grid column that takes 1/4 of parent width on lg and larger screens.
- .pi-liquid-col-lg-5 - creates grid column that takes 1/5 of parent width on lg and larger screens.
- .pi-liquid-col-lg-5 - creates grid column that takes 1/6 of parent width on lg and larger screens.
- .pi-liquid-col-Y-X- creates grid column that takes 1/X 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,3,4,5,6.
