CSSでボックスを3列で表示するときに幅を均等に分割する方法

cssでボックス3列で表示したいときにどうすればいいのかを解説します。

3列の幅を均等にするにはclac()を使う

3列の場合は幅100%を3で割るので33.33…と割り切れない数字になります。

しかしcalc()を使うことによって100%を均等に3等分することができます。具体的にはこのような書き方になります。calc(100% / 3)　以下にコードを示します。

<style>
  .container{
    display: flex;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }
  .container div{
    width: calc(100% / 3);
  }
</style>
<div class="container">
  <div>sample1</div>
  <div>sample2</div>
  <div>sample</div>
</div>

display: gird;でも3列を均等に分割できます

さっきのcalc()を使う方法とは全くことなるやり方ですが、グリッドレイアウトを使用することで簡単に子要素を3等分することができます。

<style>
.container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
</style>
<div class="container">
  <div>sample1</div>
  <div>sample2</div>
  <div>sample3</div>
</div>

まとめ

一般的にはclac()を使用するケースが多いかもしれませんがgridも知っておくといろいろなケースに対応できると思います。