<p>.caseのwidthをcolumn-width + column-gapが超えない</p> <div class="case case--type1"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <hr> <p>.caseのwidthをcolumn-width + column-gapが超える</p> <div class="case case--type2"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <hr> <p>.caseのwidthをcolumn-width + column-gapが超えない</p> <div class="case case--type3"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
.case{ counter-reset: item; width: 600px; height: 120px; -webkit-column-count: 3; -webkit-column-width: 200px; -webkit-column-rule: 20px solid black; -moz-column-count: 3; -moz-column-width: 200px; -moz-column-rule: 20px solid black; -ms-column-count: 3; -ms-column-width: 200px; -ms-column-rule: 20px solid black; column-count: 3; column-width: 200px; column-rule: 20px solid black; background-color: limegreen; } .item{ box-sizing: border-box; width: 200px; height: 40px; border: 1px solid magenta; text-align: center; background-color: skyblue; } .item::before{ counter-increment: item; content: counter(item); } /* wrapのwidthを超えない */ .case--type1{ -webkit-column-gap: 0; -moz-column-gap: 0; -ms-column-gap: 0; column-gap: 0; } /* wrapのwidthを超える */ .case--type2{ -webkit-column-gap: 1px; -moz-column-gap: 1px; -ms-column-gap: 1px; column-gap: 1px; } /* wrapのwidthを超えない */ .case--type3{ width: 620px; -webkit-column-gap: 10px; -moz-column-gap: 10px; -ms-column-gap: 10px; column-gap: 10px; }