white-space does not work with CSS GRID

I'm currently testing CSS GRID and I'm working with the FR fraction units, but I get an error.

At first nothing happened, because I was using percentage units and I did not generate any errors, what happens here is that being a percentage unit, the grid-gap does not work for me as It should work.

What I do is the following:

I have a main-content that has:

.main-content{
    display: grid;
    grid-template-columns: 4fr 2fr 2fr;
}

What produces the following: Three columns = > 4fr 2fr 2fr

So far, this is all more than good, but look at the following list:

This list, as well as the one above it and the one next to it, have the properties to make the text break down to say it in some way and generate the three points "..."

.element{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

What happens is that this does not work if I use units fr:

And if I use percentages, the problem is in the grid-gap .

Does anyone have an idea of how I can make the text break, so use fraction units in CSS GRID?