Create a container with a number of columns of the same width

A common CSS use case is to create a container with a number of columns of the same width - such as for a pricing plan comparison.

One easy way to achieve this is using CSS Flexboxes. The flex shorthand (to be applied to all the items) is a shorthand of flex-grow, flex-shrink and flex-basis.

The flex-basis defines an initial size of the elements, and then the elements grow or shrink to fit the container width. Here we use a grow of 1 for all elements, so they will scale evenly and create an equal width columns container.

#css
#csstricks
#html
#frontend
#javascript
#nodejs
#coding
#fullstack
#reactjs
#vuejs