English 中文(简体)
Pure.CSS Tutorial

Selected Reading

Pure.CSS - Grids
  • 时间：2024-12-22

Pure.CSS - Grids

Previous Page Next Page  

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.