Skip to content
Arunan Skanthan edited this page Jun 4, 2012 · 4 revisions
Property Description
line Groups units 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:

Halves

<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>

Thirds

1/3, 1/3, 1/3

<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>

1/3, 2/3

<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>

Quarters

1/4, 1/4, 1/2

<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>

3/4, 1/4

<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>

Fifths

4/5, 1/5

<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>

2/5, 3/5

<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.

Clone this wiki locally