Pure Responsive Grids builds on top of the existing Pure Grids implementation. It adds a single new class name called .pure-g-r
. You can use this instead of using .pure-g
as you normally do. All elements with a class name of .pure-u-*-*
will automatically become responsive if they are direct descendents of a .pure-g-r.
The HTML
The first gist shows how regular Pure grids are written. These grids are unresponsive. They'll always be one-thirds irrespective of the width of the screen. The second gist replaces the pure-g
with pure-g-r
, thereby making the one-third columns collapse to full width on lower screen widths.