Call Us: +7.906.229.2627
Follow Us:
HTML5 template

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.

Latest Tweet
Contact Us
  • Address: 557 Cyan Avenue, Suite 65,
    New York, CA 9008
  • Phone: (123) 456-7890
  • Email: hello@pitheme.com
  • Monday - Friday: 9:00 am - 10:00 pm
    Saturday - Sunday: Closed
Say Hey

© 2014. «Aura HTML Theme». All right reserved.