Extra space under CSS column layout

Question

I have a 2-column CSS-only grid that works, however it does cause excess space under both columns.

.

If I remove the inline block from each cell, the excess space is not so bad, but it is necessary to prevent mesh transfer. I suggested that the problem is related to vertical alignment, adding that this does not seem to have changed anything. Is there a way to prevent this excess space?

.columns { -webkit-column-gap: 1.5em; -moz-column-gap: 1.5em; column-gap: 1.5em; -webkit-column-fill: auto; -moz-column-fill: auto; column-fill: auto; } .columns__cell { break-inside: avoid-column; column-break-inside: avoid; display: inline-block; vertical-align: top; width: 100%; } .columns--2 { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } 

Structure:

 <div class="column column--2"> <!-- repeated --> <div class="widget__item poll column__cell"> <div class="widget__head clearfix"> *** </div> <div class="widget__body"> *** </div> </div> <!-- repeated --> </div> 

Answer 1

I would use the float property. .inner is the container in which you nest colLeft and colRight. This should solve your problem.

 .inner { overflow-x: hidden; overflow-y: hidden; position: relative; margin: 0 auto; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .colRight { float: left; width: 50%; } .colLeft { padding-right: 10%; float: right; width: 50%; }