What:
I had a CSS grid with 5 columns that were supposed to all be the same width, except that one of them was bigger and I couldn’t figure out why.
The CSS I was using for the items in my grid was grid-template-columns: repeat(5, 1fr) and it clearly wasn’t working. Why not? And what to do about it?
How:
Looking it up I found out that repeat(5, 1fr) is about distributing the available space, so that when a word or an image in one of the columns is wider than you had hoped the column would be, the space left over is divided into 4 smaller columns.
In my case a word in one of the columns was too long, so I implemented word-wrap: break-word for the text but I also changed the grid-template-columns declaration.
.mygrid-container .mygrid-items {
grid-template-columns: repeat(5, minmax(0,1fr));
}This means that the maximum width a column can be is 1fr and this solved the problem for me.
Where:
Thoughts:
The answer at Stack Overflow is worth looking at. It explains everything clearly and succinctly and also mentions that this method can cause content to overflow the container.