• Previous CSS Tip
• Next CSS Tip

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.

More CSS Tips

• CSS-only folded ribbon
• A simple CSS loader
• A rounded & dashed underline
• Stick an element to the top-right corner
• A matrix of cubes using one element
• Cut your image into pieces