Building a Grid System w/CSS Grid - Collapsing Cell Problems - css

Question

1
I am building a Grid System using CSS Grid and I am having a bit of difficulty. I have a shrink class that works as it is supposed to, but I would like the rest of the cells(as I call them) to fit the space in css grid. If I set .cell.shrink to grid-column:auto, is there a way to have the other cells fit the space?
2
Also, if you notice the code below, I have a class for .cell > * {whitespace:nowrap;}. Without it my links are collapsing. Is there a better way to keep it from collapsing? I just want the cell to fit the content without collapsing. I don't want to set a static value in the minmax() function either --- Example of what I DON'T want (minmax(100px, 1fr)). Again, I am trying to use css grid for this. I know flexbox just fits to the content. How can I achieve with css grid?
Below is the code I have tried.
CODEPEN LINK
https://codepen.io/Jesders88/pen/djmwNY
HTML
<div class="container">
<div class="row">
<div class="cell medium-3 shrink">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</div>
<div class="cell medium-3">CellCellCellCellCell</div>
<div class="cell medium-3">Cell</div>
<div class="cell medium-3">Cell</div>
</div>
</div>
Grid CSS
.row {
display:grid;
grid-gap:120px;
grid-template-columns:repeat(12, 1fr);
}
TRIED CSS
.shrink {
grid-column:auto !important;
}
.row {
max-width:1600px;
> .cell {
* {
white-space:nowrap;
}
}
}