使用CSS网格构建网格系统-崩溃的单元格问题

Question

1

我正在使用CSS Grid构建网格系统，但遇到了一些困难。我有一个收缩类，可以按预期工作，但是我希望其余的单元格（如我所说的）适合CSS网格中的空间。如果我将.cell.shrink设置为grid-column:auto，是否有办法让其他单元格适合空间？

2

此外，如果您注意到以下代码，则我有一个.cell > * {whitespace:nowrap;}的类。没有它，我的链接就会崩溃。有没有更好的方法来防止其崩溃？我只希望单元格适合内容而不塌陷。我也不想在minmax()函数中设置静态值-我不想要的示例（最小最大（100px，1fr））。再次，我试图为此使用CSS网格。我知道flexbox只适合内容。如何使用CSS网格实现？

下面是我尝试过的代码。

CODEPEN链接

---

https://codepen.io/Jesders88/pen/djmwNY

HTML

---

<div class="container">
  <div class="row">
    <div class="cell medium-3 shrink">
        <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></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>

网格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;
        }
    }
}