-
Notifications
You must be signed in to change notification settings - Fork 0
Grids
Arunan Skanthan edited this page Jun 4, 2012
·
4 revisions
Property | Description |
---|---|
line |
Groups unit s on one horizontal line. (Note: for mobile layout units may be stacked to avoid horizontal scrolling.) |
unit |
Divides a line into sections (columns). |
sizeXofY |
Extends unit . Indicates the fractional width of the unit , for example size3of4 would take up three quarters, or 75%, of the horizontal space. The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5. |
last-unit |
Extends unit. Applied to the last child of every line. |
HTML:
<div class="line"> <div class="unit size1of2"> <h3>1/2</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size1of2 last-unit"> <h3>1/2</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
<div class="line"> <div class="unit size1of3"> <h3>1/3</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size1of3"> <h3>1/3</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size1of3 last-unit"> <h3>1/3</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
<div class="line"> <div class="unit size1of3"> <h3>1/3</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size2of3 last-unit"> <h3>2/3</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
<div class="line"> <div class="unit size1of4"> <h3>1/4</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size1of4"> <h3>1/4</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size1of2 last-unit"> <h3>1/2</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
<div class="line"> <div class="unit size3of4"> <h3>3/4</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size1of4 last-unit"> <h3>1/4</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
<div class="line"> <div class="unit size4of5"> <h3>4/5</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size1of5 last-unit"> <h3>1/5</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
<div class="line"> <div class="unit size2of5"> <h3>2/5</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size3of5 last-unit"> <h3>3/5</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
Ref: Based on the OOCSS Grids.