Pure CSS – Grids Units:

Pure comes with 2 types of Grids Units Sizes.

  1. 5th Based Grid Unit Size
  2. 24th Based Grid Unit Size

All Units are the fractions of 5 or 24 which needs to be appended to pure-u to make a class name. For example, pure-u-1-4 is the unit class name of 20% width.

Below is the example for 5th based Grids Units:

<html> 

<head> 

<title>Pure CSS 5th Grids Units</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-u-bg{

               background-color:#D5F5E3;

               border:4px solid #FFF;

               }

</style> 

</head> 

         <body> 

                        <div class="pure-u-1-5 pure-u-bg"><p>1-5</p></div><br>

                        <div class="pure-u-2-5 pure-u-bg"><p>2-5</p></div><br>

                        <div class="pure-u-3-5 pure-u-bg"><p>3-5</p></div><br>

                        <div class="pure-u-4-5 pure-u-bg"><p>4-5</p></div><br>

                        <div class="pure-u-5-5 pure-u-bg"><p>5-5</p></div><br>

         </body> 

</html>

Below is the output for 5th Grids Units.

GridsUnits - i2tutorials

Below is the example for 24th based Grid Units:

<html> 

<head> 

<title>Pure CSS 24 Grids Units</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-u-bg{

               background-color:#D5F5E3;

               border:2px solid #FFF;

               height:2em;

                           }

</style> 

</head> 

         <body> 

                        <div class="pure-u-1-24 pure-u-bg"><p>1-24</p></div><br>

                        <div class="pure-u-2-24 pure-u-bg"><p>2-24</p></div><br>

                        <div class="pure-u-3-24 pure-u-bg"><p>3-24</p></div><br>

                        <div class="pure-u-4-24 pure-u-bg"><p>4-24</p></div><br>

                        <div class="pure-u-5-24 pure-u-bg"><p>5-24</p></div><br>

                        <div class="pure-u-6-24 pure-u-bg"><p>6-24</p></div><br>

                        <div class="pure-u-7-24 pure-u-bg"><p>7-24</p></div><br>

                        <div class="pure-u-8-24 pure-u-bg"><p>8-24</p></div><br>

                        <div class="pure-u-9-24 pure-u-bg"><p>9-24</p></div><br>

                        <div class="pure-u-10-24 pure-u-bg"><p>10-24</p></div><br>

                        <div class="pure-u-11-24 pure-u-bg"><p>11-24</p></div><br>

                        <div class="pure-u-12-24 pure-u-bg"><p>12-24</p></div><br>

                        <div class="pure-u-13-24 pure-u-bg"><p>13-24</p></div><br>

                        <div class="pure-u-14-24 pure-u-bg"><p>14-24</p></div><br>

                        <div class="pure-u-15-24 pure-u-bg"><p>15-24</p></div><br>

                        <div class="pure-u-16-24 pure-u-bg"><p>16-24</p></div><br>

                        <div class="pure-u-17-24 pure-u-bg"><p>17-24</p></div><br>

                        <div class="pure-u-18-24 pure-u-bg"><p>18-24</p></div><br>

                        <div class="pure-u-19-24 pure-u-bg"><p>19-24</p></div><br>

                        <div class="pure-u-20-24 pure-u-bg"><p>20-24</p></div><br>

                        <div class="pure-u-21-24 pure-u-bg"><p>21-24</p></div><br>

                        <div class="pure-u-22-24 pure-u-bg"><p>22-24</p></div><br>

                        <div class="pure-u-23-24 pure-u-bg"><p>23-24</p></div><br>

                        <div class="pure-u-24-24 pure-u-bg"><p>24-24</p></div><br>

   </body> 

</html>



Below is the output for 24th Grids Units.

Coming soon