没有空间时如何将css网格列包装到下一行

Question

我目前遇到了 CSS 网格的问题。我在 Stackoverflow 或 Google 上找了几个小时，但找不到相关且正确的解决方案。

我的目标是实现这种行为：

一开始是一行中的所有元素，但是当我开始缩小屏幕（响应性）时，我想让不适合换行的元素换行。 （基本上是最后一个元素，在这种情况下是链接）。我想要实现的这种行为就像display flex的属性flex-wrap:wrap一样。

在我一直在搜索的所有文章中，它们都使用固定宽度的列，但我的目标也是让它像使用 display:flex 时一样“自动”。 （我真的不知道文本会有多长时间。文本将通过props发送到该组件）

总结一下：

我的目标是让display:grid 自动检测它必须创建多少列（那里有多少个子项）并在没有空间时自动将元素换行到新行。

这可能吗？

.notification{
  background:lightgreen;
  padding:1rem;
  display:inline-block;
}

.notification-body{
  display: inline-grid;
  grid-auto-flow: column;
  grid-column-gap: 1rem;
  align-items: center;
}

.notification-content-wrapper{
  display: inline-grid;
  grid-auto-flow: column;
  /*this is supposed to work according to other articles..*/
  grid-template-columns: repeat(auto-fit, minmax(max-content, 0px));
  grid-column-gap: 1rem;
  align-items: center;
}

<div class="notification">
  <div class="notification-body">
    <p>there will<br>be always icon</p>
    
    <div class="notification-content-wrapper">
      <p>Notification message</p>
      <a href="#">notification link</a>
    </div>
    
    <p>there will be<br>always icon too</p>
  </div>
</div>

Answer 1

正如 Ricky 在此 (CSS grid wrapping) 所述：

repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

查看他们的答案以获得更详细的解释。