/    /  Pure CSS – Regular Grids

Pure CSS – Regular Grids:

By the name, we can understand that these are not responsive. Regular grid shows the elements as it is. They will not get re-arranged even in the mobile version. Please take a look at the below example for regular grid view.



<title>Pure CSS Regular Grid</title>


<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"> 



               background-color: #f9f9f9;

               padding: 20px;

               border : 1px solid grey;






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

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

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

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

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




If you use the above code and save it as test.html and open in the browser. Below is the output you could get.