Paged columns layout

Question

I'm trying to achieve a layout with multiple columns filled with elements of the same width (column-width) but with varying heights. The idea is to have some form of pagination, where you could either scroll the container and have it adjust to only show full columns, or click on a button to see the next or previous columns.

I've put a plunker here to illustrate the idea.

My issue is that no matter what I do, I can't seem to get rid of the column-gap, which seems to have a default minimum. I also can't figure out how the gap size is determined, so I can't really calculate how much I should scroll the container. Any help would be really appreciated. Thanks!

Answer 1

The problem is the width you set on the .el elements, change this width to 100% and you gap will be removed.

See this FIDDLE

HTML :

<div id="cols">
    <div>ELEMENT</div>
    <div>ELEMENT</div>
    <div>ELEMENT</div>
    ...
</div>

CSS :

#cols {
    height: 100%;
    -webkit-column-width: 25em;
    -moz-column-width: 25em;
    -ms-column-width: 25em;
    -o-column-width: 25em;
    column-width: 25em;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    -ms-column-gap: 0;
    -o-column-gap: 0;
    column-gap: 0;
}
#cols > div{
    background:gold;
    height:50px;
    margin:5px 0;
    display:inline-block;
    width:100%; /*<-- this line */
}