The WP Grid System is fully responsive for the view at all devices. Your texts and typography will scale on the following breakpoints.
Automatic stacking
On mobile devices, tablets and below, the columns will automatically stack on XXS and XS, below 577 pixels, if you use WPGS responsive html.
WPGS responsive html editor
All breakpoints of WP Grid System
WPGS has 6 breakpoints:
| XX-Small | xxs | 0 – 420px |
| X-Small | xs | 420px – 576px |
| Small | s | 577px – 768px |
| Medium | md | 769px – 992px |
| Large | lg | 993px – 1200px |
| Extra large | xl | 1201px – 1400px |
| Extra extra large | xxl | 1401px and bigger |
WordPress and other frameworks
WPGS has the best of both worlds. A combination of existing html frameworks but then applied to WordPress.
Let’s check some popular frameworks to get an idea of what approach to follow.
Bootstrap has breakpoints at 576px, 768px, 992px, and 1200px.
Foundation mainly has breakpoints at 40em and 64em.
At Bulma, breakpoints are set at 768px, 769px, 1024px, 1216px, and 1408px.
Bootstrap breakpoints
| X-Small | None | 0–576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
WordPress Page builders breakpoints
Page builders don’t have breakpoints for smaller devices. The lowest breakpoint for most WordPress page builders is 768 pixels.
768/576=1.3333
Most page builders heave 2 responsive breakpoints. WPGS has 6 breakpoints. This enhances your design and typography.
Beaver builder breakpoints
| Small | md | 0-768px |
| Medium | lg | 769-991px |
| Large | xl | ≥992px |
Elementor breakpoints
| Small | md | 0-768px |
| Medium | lg | 769-1024px |
| Large | xl | ≥1025px |
By default, Elementor offers 3 breakpoints:
