Equal Width Columns with CSS Grid

The CSS code:

grid-template-columns: repeat(3, 1fr);

will create 3 grid columns with the available space. However, if one column has content that is longer than others (a word with more characters for example or a big image), that content's column will take up more horizontal space than the others.

To make the columns equi-width:

grid-template-columns: repeat(3, minmax(0, 1fr));

This code allows the columns to be as small as 0px and flex to as much as 1fr of the available space.

However, if the content doesn't fit, it will either overflow or wrap.

Feedback?

Email us at enquiries@kinsa.cc.