Search code examples
javascriptcsscss-multicolumn-layout

JavaScript for breaks in multi-column layout

I'm using the multi-column CSS layout in a fixed height element so the browser creates as many columns as it needs to contain the content. New columns will always appear to the right of the other columns, but I would like to break after three columns and have columns 4,5,6 appear below 1,2,3. I imagine this can be done with JS, but I don't know what to select. 

.columns {
    width: 360px;
    font-size: 100%;
    text-align: justify;
    height: 300px;
    display: block;
    padding-bottom: 30px;
       -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
       -moz-column-width: 100px;
    -webkit-column-width: 1000px;
       -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
}

<div class="columns"><p>Lorem ipsum.../p></div>
Solution

  • You could put your columned element in a container with the width you need and overflow:hidden. Then use JavaScript to clone your columned element, put the clone in your container (directly after the original) and give the clone either margin-left: -100% or relative positioning.