【CSS】width:calc(100%/3)で3分割しよう

「3分割したいけど100は3で割り切れないよ！」

「calcを使いたいけどうまくいかない！」

width:calc(100%/3)を使って3分割する方法を解説します。

3分割するということは要素を横に並べて3列にするということです。

今回は3列2行の枠を作ってみましょう。

width:calc(100%/3)で3分割

<style>
.example{
    display: flex;
    flex-wrap: wrap;
}
.example>div{
    /*コレ*/width: calc(100% / 3);
    border: 1px solid #333;
    padding: 10px;
    box-sizing: border-box;
    background: #ddeeff;
}
</style>
<div class="example">
    <div>テキスト</div>
    <div>テキストテキスト</div>
    <div>テキストテキストテキスト</div>
    <div>テキストテキストテキスト</div>
    <div>テキスト</div>
    <div>テキストテキスト</div>
</div>

「display:flex」で子要素を横並べしましょう。これだけでは2行にならないため「flex-wrap:wrap」を指定して改行されるようにします。

子要素を3分割しましょう。

「width:33.3%」でもいいですが、割り切れませんし、なんとなく気持ちが悪いですね。

そんなとき使うのが「calc」です。これは単位の違う数値の足し引きや、割り算かけ算ができるものです。

「width:calc(100% / 3)」と指定すると親要素の三分の一になります。

borderやpaddingを指定すると幅が大きくなってしまうため「box-sizing: border-box」を指定してwidthに含むようにしましょう。

これで3列2行の枠ができました。

calcの注意点

calcは半角スペースの使い方がキモです。

「/」（割り算）「*」（掛け算）のときは記号の前後にスペースがあってもなくてもいいですが、「+」（足し算）「-」（引き算）のときは記号の前後にスペースがないと効きません。

calcが効かないときは下記をご覧ください。

marginをつける場合

<style>
.example2{
    display: flex;
    flex-wrap: wrap;
}
.example2>div{
    /*コレ*/width: calc(100% / 3 - 20px);
    /*コレ追加*/margin: 10px;
    border: 1px solid #333;
    padding: 10px;
    box-sizing: border-box;
    background: #ddeeff;
}
</style>
<div class="example2">
    <div>テキスト</div>
    <div>テキストテキスト</div>
    <div>テキストテキストテキスト</div>
    <div>テキストテキストテキスト</div>
    <div>テキスト</div>
    <div>テキストテキスト</div>
</div>

子要素同士を空けるためにmarginを指定することもあるでしょう。

上記は「margin: 10px」を指定した例です。

marginは「box-sizing: border-box」を指定してもwidthに含まれないため、1つの要素が(100% / 3)+20pxとなり、1行に3つ分入れなくなります。

marginによって20pxオーバーしているならwidthから20px引けばいいのです。

「width:calc(100% / 3 - 20px)」と指定するとそれが実現できます。

数学の計算上、かけ算割り算が先で、足し算引き算が後です。

よって上記の式では100%を3分割してから20pxを引きます。

これでmarginがついていても3分割できます。

両端寄せする場合

<style>
.example3{
    display: flex;
    flex-wrap: wrap;
    /*コレ*/justify-content: space-between;
}
.example3>div{
    width: 30%;
    margin-bottom: 20px;
    border: 1px solid #333;
    padding: 10px;
    box-sizing: border-box;
    background: #ddeeff;
}
</style>
<div class="example3">
    <div>テキスト</div>
    <div>テキストテキスト</div>
    <div>テキストテキストテキスト</div>
    <div>テキストテキストテキスト</div>
    <div>テキスト</div>
    <div>テキストテキスト</div>
</div>

親要素に「justify-content:space-between」を指定すると子要素は両端寄せになります。

こうすると左右のmarginがなくても要素同士を空けることができます。

要素の幅については「width:calc(100% / 3 - ○px)」のように引き算してもいいですが、33.33…%より小さければ間は空くので「width: 30%」のように単純指定してしまったほうがカンタンでしょう。

【まとめ】3分割する方法

• width: calc(100% / 3)で3分割する
• box-sizing: border-boxでpaddingを含める

marginをつける場合

• 左右のmargin分calc(100% / 3)から引く

両端寄せする場合

• 親要素に「justify-content:space-between」を指定する
• 子要素の幅は33.33…%より小さくする

以上、width:calc(100%/3)で3分割しようでした。