Home / Pure CSS Tutorial / 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.

<html> 

<head> 

<title>Pure CSS Regular 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"> 

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

</div>

          </body> 

</html>

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