First, include it on your page
Add this CSS file to your page:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.0pr3/build/cssgrids-responsive/cssgrids-responsive-min.css">
Optionally, you can head over to the GridBuilder to make your very own custom grid. Save the outputted CSS in a file.
How does it work?
YUI3 Responsive Grids builds on top of the existing YUI3 Grids implementation. It adds a single new class name called
.yui3-g-r (the "r" stands for responsive, you see). You can use this instead of using
.yui3-g as you normally do. All elements with a class name of
.yui3-g-*-* will automatically become responsive if they are direct descendents of a
The first gist shows how regular YUI3 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
.yui3-g-r, thereby making the one-third columns collapse to full width on lower screen widths.