CSS Multiple Columns

Understanding The CSS Multiple Columns Function.

HTML

<div id = "columnContainer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sit amet diam non ornare. Proin ac mi vel nulla sodales hendrerit nec id purus. Pellentesque ac finibus purus, nec pulvinar mi. Quisque ultrices nec quam eget posuere. Pellentesque at nulla sodales ligula efficitur tincidunt a sit amet tellus. Quisque pulvinar nibh metus, in elementum magna placerat a. Nulla tincidunt odio sed nulla tempus vulputate. In sed mauris felis. Cras auctor diam eros, nec maximus massa varius non. Sed imperdiet elit dolor, blandit dignissim lacus accumsan nec. Sed urna risus, sodales ut enim sit amet, semper dictum ante. Cras consectetur purus ac mauris porta malesuada. Nulla facilisi.
</div>

CSS

#columnContainer {
    -webkit-column-count: 1;
    -webkit-column-rule: 1px solid black;
    -webkit-column-gap: 120px;
    
    -moz-column-count: 2;
    -moz-column-rule: 1px solid black;
    -moz-column-gap: 60px;
    
    column-count: 3;
    column-rule: 1px solid black;
    column-gap: 60px;
    
    text-align: center;
}