Equal width buttons

Make a set of buttons equal in width to the largest one using a few lines of code.

• No JavaScript
• Works with any number of button
• Easily switch between the horizontal and vertical configuration

.container {
  display: grid; /* OR inline-grid*/
  grid-auto-flow: column; /* OR row */
  grid-auto-columns: 1fr;
  width: max-content; /* not needed with inline-grid */
}

See the Pen Equal width buttons by Temani Afif (@t_afif) on CodePen.

• Previous CSS Tip
• Next CSS Tip