columns

SassMeister-input-HTML.html

<div class="details">
  <p>Israel is a small country with a very well-informed and opinionated electorate. Naturally, Israeli media outlets have followed the election campaign closely, and they will be eager to call the outcome as quickly as they can.</p>
  <hr />
  <p>Voting stations close at 10 p.m. (4 p.m. Eastern time), but official results will not be available right away — in fact, they may not be known in full until sometime Wednesday morning.</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// properties: column-count|column-width
// values: integer || unit (not %)
@mixin columns($columns, $column-width: auto) {
  -webkit-columns: $columns;
  -moz-columns: $columns;
  columns: $columns;
  -webkit-column-width: $column-width;
  -moz-column-width: $column-width;
  column-width: $column-width;
}

// values: auto || integer
@mixin column-count($column-count) {
    -webkit-column-count: $column-count;
    -moz-column-count: $column-count;
    column-count: $column-count;
}

// value: auto || unit (not %)
@mixin column-width($column-width) {
    -webkit-column-width: $column-width;
    -moz-column-width: $column-width;
    column-width: $column-width;
}

// values: normal (1em) || unit (not %)
@mixin column-gap($column-gap) {
  -webkit-column-gap: $column-gap;
  -moz-column-gap: $column-gap;
  column-gap: $column-gap;
}
// values: all || none
@mixin column-span($column-span) {
  -webkit-column-span: $column-span;
  -moz-column-span: $column-span;
  column-span: $column-span;
}
// values: column-rule-width|column-rule-style|column-rule-color
@mixin column-rule($column-rule-width, $column-rule-style, $column-rule-color) {
    -webkit-column-rule-width: $column-rule-width;
    -moz-column-rule-width: $column-rule-width;
    column-rule-width: $column-rule-width;
    -webkit-column-rule-style: $column-rule-style;
    -moz-column-rule-style: $column-rule-style;
    column-rule-style: $column-rule-style;
    -webkit-column-rule-color: $column-rule-color;
    -moz-column-rule-color: $column-rule-color;
    column-rule-color: $column-rule-color;
}

// usage: use avoid on an element within
// a multi-column layout to keep the property
// from breaking apart
// values: auto || avoid
@mixin break-inside($break-inside) {
    -webkit-column-break-inside: $break-inside;
    page-break-inside: $break-inside; // firefox
    break-inside: $break-inside; 
}

.details {
  @include columns(2, 200px);
  @include column-count(3);
  @include column-width(150px);
  @include column-gap(15px);
  @include column-rule(1px, solid, #000);
 
  hr {
    @include column-span(all);
  }
  
  p {
    @include break-inside(auto);
  }
  
  
}

SassMeister-output.css

.details {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-width: 200px;
  -moz-column-width: 200px;
  column-width: 200px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  column-width: 150px;
  -webkit-column-gap: 15px;
  -moz-column-gap: 15px;
  column-gap: 15px;
  -webkit-column-rule-width: 1px;
  -moz-column-rule-width: 1px;
  column-rule-width: 1px;
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  column-rule-style: solid;
  -webkit-column-rule-color: #000;
  -moz-column-rule-color: #000;
  column-rule-color: #000;
}
.details hr {
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
}
.details p {
  -webkit-column-break-inside: auto;
  page-break-inside: auto;
  break-inside: auto;
}

SassMeister-rendered.html

<div class="details">
  <p>Israel is a small country with a very well-informed and opinionated electorate. Naturally, Israeli media outlets have followed the election campaign closely, and they will be eager to call the outcome as quickly as they can.</p>
  <hr />
  <p>Voting stations close at 10 p.m. (4 p.m. Eastern time), but official results will not be available right away — in fact, they may not be known in full until sometime Wednesday morning.</p>
</div>