Pure CSS – Grids Units:
Pure comes with 2 types of Grids Units Sizes.
- 5th Based Grid Unit Size
- 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.
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