Columns | Compass API

html haml

<div id='two-column'>
  Lorem ipsum dolor sit amet,
  consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua.
</div>
<div id='three-column'>
  Lorem ipsum dolor sit amet,
  consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua.
</div>
<div id='four-column-with-rule'>
  Lorem ipsum dolor sit amet,
  consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua.
</div>

%div(id="two-column")
  Lorem ipsum dolor sit amet,
  consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua.

%div(id="three-column")
  Lorem ipsum dolor sit amet,
  consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua.

%div(id="four-column-with-rule")
  Lorem ipsum dolor sit amet,
  consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut
  labore et dolore magna aliqua.

scss sass css

@import "compass/css3";

#two-column {
  @include column-count(2);
  width: 300px;
  margin-bottom: 20px;
}

#three-column {
  @include column-count(3);
  width: 300px;
  margin-bottom: 20px;
}

#four-column-with-rule {
  @include column-count(4);
  @include column-rule(1px, solid, red);
  width: 300px;
  margin-bottom: 20px;
}

@import compass/css3

#two-column
  +column-count(2)
  width: 300px
  margin-bottom: 20px

#three-column
  +column-count(3)
  width: 300px
  margin-bottom: 20px

#four-column-with-rule
  +column-count(4)
  +column-rule(1px, solid, red)
  width: 300px
  margin-bottom: 20px

#two-column{-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2;width:300px;margin-bottom:20px}#three-column{-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3;width:300px;margin-bottom:20px}#four-column-with-rule{-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4;-webkit-column-rule:1px solid red;-moz-column-rule:1px solid red;-ms-column-rule:1px solid red;-o-column-rule:1px solid red;column-rule:1px solid red;width:300px;margin-bottom:20px}

Demo: Columns