<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Pure.CSS Grids </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css"> <style> .grids-example { background: rgb(250, 250, 250); font-family: Roboto, 'Liberation Mono', Courier, monospace; } .grid-unit { padding-left: 30px; padding-top: 5px; } .grid-unit .grid-unit-width { font-family: Roboto, 'Liberation Mono', Courier, monospace; } .grid-unit-bar { height: 30px; border-radius: 5px; background: #7559ca; margin-bottom: 10px; } </style> </head> <body> <div class="grids-example"> <div class="grid-unit pure-g"> <div class="grid-unit-width pure-u">1-5</div> <div class="grid-unit-details pure-u-1"> <div class="pure-g"> <div class="grid-unit-bar pure-u-1-5"></div> </div> </div> </div> <div class="grid-unit pure-g"> <div class="grid-unit-width pure-u">2-5</div> <div class="grid-unit-details pure-u-1"> <div class="pure-g"> <div class="grid-unit-bar pure-u-2-5"></div> </div> </div> </div> <div class="grid-unit pure-g"> <div class="grid-unit-width pure-u">3-5</div> <div class="grid-unit-details pure-u-1"> <div class="pure-g"> <div class="grid-unit-bar pure-u-3-5"></div> </div> </div> </div> <div class="grid-unit pure-g"> <div class="grid-unit-width pure-u">4-5</div> <div class="grid-unit-details pure-u-1"> <div class="pure-g"> <div class="grid-unit-bar pure-u-4-5"></div> </div> </div> </div> <div class="grid-unit pure-g"> <div class="grid-unit-width pure-u">1</div> <div class="grid-unit-details pure-u-1"> <div class="pure-g"> <div class="grid-unit-bar pure-u-1"></div> </div> </div> </div> <div class="grid-unit pure-g"> <div class="grid-unit-width pure-u">1-1</div> <div class="grid-unit-details pure-u-1"> <div class="pure-g"> <div class="grid-unit-bar pure-u-1-1"></div> </div> </div> </div> <div class="grid-unit pure-g"> <div class="grid-unit-width pure-u">5-5</div> <div class="grid-unit-details pure-u-1"> <div class="pure-g"> <div class="grid-unit-bar pure-u-5-5"></div> </div> </div> </div> </div> </body> </html>
