multi-column layouts - Learning Css3

dabblet.css

/**
 * multi-column layouts - Learning Css3
 * http://www.w3.org/TR/css3-multicol/
 */
body { font: 14px/1.5 "Lucida Grande", "Lucida Sans Unicode", Lucida, Arial, Helvetica, sans-serif; }

/*
 * columns: column-count columns-width
 * column-gap: 1em(default)
 * column-rule
 * column-span: none | all
 * column-fill: auto | balance
 * break-before, break-after: auto | always | avoid | left | right | page | column | avoid-page | avoid-column
 * break-inside: auto | avoid | avoid-page | avoid-column
 * Note: no browser support `column-fill' until 3/14/2012
 */
 h2 { background: silver; }
 .cl1 { column-width: 20em; }
 .cl1 h2 { column-span: all; }
 .cl2 { column-count: 2; column-gap: 3em;
 column-rule: solid 1px #09c; }
 
 .cl3 { column-count: 2; }
 .cl-fill { column-fill: balance; }
 .columns { columns: 3; }
 .webkit-columns { -webkit-columns: 3; }

dabblet.html

<div class="cl1"><h2>This is title</h2>People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.</div>
<div>&nbsp;</div>
<div class="cl2"><h2>column-gap and column-rule</h2>People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.</div>
<div>&nbsp;</div>
<div class="cl3"><h2>This is title</h2>People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.</div>
<div>&nbsp;</div>
<div class="cl3 cl-fill"><h2>column-fill: balance</h2>People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. Unfortunately this is impossible to do with CSS and HTML without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.</div>
<div>&nbsp;</div>
<div class="columns"><h2>columns</h2>People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on.</div>

<div class="webkit-columns"><h2>-webkit-columns</h2>People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on.</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}