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.

Accounting for gap with minmax

Using minmax(0, 1fr) also accounts for gap. In the following code example, the 2nd column will end 24px over the right edge of the container because of the gap:

.container {
max-width: 768px;
overflow: hidden;
display: grid;
gap: 24px;
grid-template-columns: repeat(2, 1fr);
}

Changing grid-template-columns to grid-template-columns: repeat(2, minmax(0, 1fr)); will allow the columns to shrink into the space, preventing the overflow issue.

Feedback?

Email us at enquiries@kinsa.cc.