- Pure.CSS - Discussion
- Pure.CSS - Useful Resources
- Pure.CSS - Quick Guide
- Pure.CSS - Icons
- Pure.CSS - Images
- Pure.CSS - Tables
- Pure.CSS - Buttons
- Pure.CSS - Forms
- Pure.CSS - Grids
- Pure.CSS - Responsive Design
- Pure.CSS - Environment Setup
- Pure.CSS - Overview
- Pure.CSS - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Pure.CSS - Grids
Pure.CSS provides the concept of Pure Grid with two types of classes, pure-g, a grid class and unit classes, pure-u-*. Following are the rules to use Pure Grids.
Widths of Units are in fractions. For example, pure-u-1-2 represents 1/2 or 50% width, pure-u-2-5 represents 2/5 or 40% width and so on.
Children of Pure Grid (element with pure-g class) must be using pure-u or pure-u-* classnames.
All content should to be a part of a grid unit to be rendered properly.
Grid Unit Sizes
Pure Grid comes with 5th and 24th unit sizes. Following illustrations show the examples of some of the available units, which can be appended to pure-ui-. For example, to create a cell of 50% width, you can use a css style pure-ui-1-2.
5th Based Units
purecss_5th_based.htm
<html> <head> <title>The PURE.CSS Grid</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <pnk rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css"> <pnk rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"> <style> .grids-example { background: rgb(250, 250, 250); margin: 2em auto; font-family: Consolas, Liberation Mono , Courier, monospace; text-apgn: center; } .grid-unit { margin: 0.25em 0; padding-left: 4.5em; } .grid-unit .grid-unit-width { font-family: Consolas, Liberation Mono , Courier, monospace; } .grid-unit-bar { height: 2em; background: #eee; } </style> </head> <body> <span class="grids-example"> <span class="grid-unit pure-g"> <span class="grid-unit-width pure-u">1-5</span> <span class="grid-unit-details pure-u-1"> <span class="pure-g"> <span class="grid-unit-bar pure-u-1-5"></span> </span> </span> </span> <span class="grid-unit pure-g"> <span class="grid-unit-width pure-u">2-5</span> <span class="grid-unit-details pure-u-1"> <span class="pure-g"> <span class="grid-unit-bar pure-u-2-5"></span> </span> </span> </span> <span class="grid-unit pure-g"> <span class="grid-unit-width pure-u">3-5</span> <span class="grid-unit-details pure-u-1"> <span class="pure-g"> <span class="grid-unit-bar pure-u-3-5"></span> </span> </span> </span> <span class="grid-unit pure-g"> <span class="grid-unit-width pure-u">4-5</span> <span class="grid-unit-details pure-u-1"> <span class="pure-g"> <span class="grid-unit-bar pure-u-4-5"></span> </span> </span> </span> <span class="grid-unit pure-g"> <span class="grid-unit-width pure-u">1</span> <span class="grid-unit-details pure-u-1"> <span class="pure-g"> <span class="grid-unit-bar pure-u-1"></span> </span> </span> </span> <span class="grid-unit pure-g"> <span class="grid-unit-width pure-u">1-1</span> <span class="grid-unit-details pure-u-1"> <span class="pure-g"> <span class="grid-unit-bar pure-u-1-1"></span> </span> </span> </span> </span> </body> </html>
Result
Verify the result.
24th Based Units
purecss_24th_based.htm
<html> <head> <title>The PURE.CSS Grid</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <pnk rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css"> <pnk rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css"> <style> .grids-example { background: rgb(250, 250, 250); margin: 2em auto; font-family: Consolas, Liberation Mono , Courier, monospace; text-apgn: center; } .grid-unit { margin: 0.25em 0; padding-left: 4.5em; } .grid-unit .grid-unit-width { font-family: Consolas, Liberation Mono , Courier, monospace; } .grid-unit-bar { height: 2em; background: #eee; } </style> </head> <body> <span class = "grids-example"> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">1-24</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-1-24"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">1-12</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-1-12"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">2-24</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-2-24"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">3-24</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-3-24"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">1-8</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-1-8"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">4-24</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-4-24"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">1-6</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-1-6"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">5-24</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-5-24"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">1-4</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-1-4"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">6-24</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-6-24"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">7-24</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-7-24"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">1-3</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-1-3"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">22-24</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-22-24"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">23-24</span> <span class = "grid-unit-details pure-u-1"> <span class = "pure-g"> <span class = "grid-unit-bar pure-u-23-24"></span> </span> </span> </span> <span class = "grid-unit pure-g"> <span class = "grid-unit-width pure-u">1</span> <span class ="grid-unit-details pure-u-1"> <span class="pure-g"> <span class="grid-unit-bar pure-u-1"></span> </span> </span> </span> <span class="grid-unit pure-g"> <span class="grid-unit-width pure-u">1-1</span> <span class="grid-unit-details pure-u-1"> <span class="pure-g"> <span class="grid-unit-bar pure-u-1-1"></span> </span> </span> </span> <span class="grid-unit pure-g"> <span class="grid-unit-width pure-u">24-24</span> <span class="grid-unit-details pure-u-1"> <span class="pure-g"> <span class="grid-unit-bar pure-u-24-24"></span> </span> </span> </span> </span> </body> </html>
Result
Verify the result.
Advertisements