Pure CSS – Responsive Grids:

Pure has provided the mobile prioritized grid system which will not come with pure.css file. For which, we need to use separate CSS file by using the below CDN link. The below provided link should be used between head tags and before the project specific style sheets.

 

Now, Let us see one example for the Pure Responsive Grids.

 

You can now save the above code ResponsiveGrid.html and open in browser. You should understand mobile version when you resize the browser window. Below output shows you the elements which are re-arranged when the browser window is resized.