横並びになったボタンを同じ幅で配置するCSS

複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。

縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。

<div class="wrapper">
  <button type="button">Hi</button>
  <button type="button">Hello</button>
  <button type="button">Lorem ipsum dolor</button>
</div>

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: fit-content;
}

See the Pen Untitled by Yuhei Yasuda ( @yuheiy) on CodePen.

この例では、ボタンの幅は親要素いっぱいになりつつ、親要素の幅は最も幅の広いボタンにフィットするようになる。

横方向に並んだボタンの幅を合わせる場合でも、何かしらの方法で、最も幅の広いボタンの大きさを知る必要がある。そこで、Gridのfrが使える。グリッドアイテムの幅は等幅になるように指定しつつ、グリッド自体の幅はコンテンツに応じた幅にすることで、すべてのボタンの幅を最も幅の広いボタンに合わせることができる。

.wrapper {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 1rem;
  width: fit-content;
}

See the Pen Untitled by Yuhei Yasuda ( @yuheiy) on CodePen.

grid-auto-columnsとgrid-auto-flowを指定することで、どのように暗黙的なグリッドが生成されるかを定義できる。例のような場合、明示的なグリッドを使用すると、要素内に含めるボタンの個数に応じてグリッドの設定を変更する必要があるが、暗黙的なグリッドを使用すれば、ボタンの個数にかかわらず自ずと適切に処理されるようになる。