JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<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>

CSS

.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;
}