<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> PURE.CSS Responsive</title> <style> .grids-example { background: rgb(250, 250, 250); margin: 10px auto; font-family: Roboto, 'Liberation Mono', Courier, monospace; text-align: center; } .graybox { background: rgb(240, 240, 240); border: 1px solid #ddd; } </style> </head> <body> <div class = "grids-example"> <div class = "pure-g"> <div class = "pure-u-1-1"> <div class = "graybox"> <p>These four columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens. </p> </div> </div> <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> <div class = "graybox"> <p>First Column</p> </div> </div> <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> <div class="graybox"> <p>Second Column</p> </div> </div> <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> <div class="graybox"> <p>Third Column</p> </div> </div> <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> <div class = "graybox"> <p>Fourth Column</p> </div> </div> </div> </div> <div class = "grids-example"> <div class = "pure-g"> <div class = "pure-u-1"> <div class = "graybox"> <p>This column is to occupy the complete space of a row.</p> </div> </div> </div> </div> <div class = "grids-example"> <div class = "pure-g"> <div class = "pure-u-2-5"> <div class = "graybox"> <p>This column is to occupy the two-fifth of the space of a row.</p> </div> </div> </div> </div> <div class = "grids-example"> <div class = "pure-g"> <div class = "pure-u-3-5"> <div class = "graybox"> <p>This column is to occupy the three-fifth of the space of a row.</p> </div> </div> </div> </div> <div class = "grids-example"> <div class = "pure-g"> <div class = "pure-u-1-3"> <div class = "graybox"> <p>Column 1: This column is to occupy the one-third of the space of a row on all devices. </p> </div> </div> <div class = "pure-u-1-3"> <div class = "graybox"> <p>Column 2: This column is to occupy the one-third of the space of a row on all devices. </p> </div> </div> <div class = "pure-u-1-3"> <div class = "graybox"> <p>Column 3: This column is to occupy the one-third of the space of a row on all devices. </p> </div> </div> </div> </div> </body> </html>
