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.

 

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">

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

 

<html> 

<head> 

<title>Pure CSS Responsive Grid</title>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">

<style> 

       .pure-g-bg{

               background-color: #f9f9f9;

               padding: 20px;

               border : 1px solid grey;

               }

               </style> 



</head> 

         <body> 

<div class="pure-g pure-g-bg">

    <div class="pure-u-1 pure-u-md-1-4 "><p>First Unit</p></div>

    <div class="pure-u-1 pure-u-md-1-4 "><p>Second Unit</p></div>

    <div class="pure-u-1 pure-u-md-1-4 "><p>Third Unit</p></div>

    <div class="pure-u-1 pure-u-md-1-4 "><p>Fourth Unit</p></div>

</div>

        </body> 

</html>

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.