CSS to display no-wrap DIVs in a grid with automatic number of columns

Question

Say, if I want to display a group of non-wrapping div's in a grid, all aligned to the left, so that the number of columns is determined automatically based on the browser's window width.

Can I do it with CSS?

Here's a sketch to show this:

I was able to find the following grid CSS property, but the issue is that it wants me to specify minimum width of an individual cell, or 8em in my example below, which defeats the purpose, as I don't know how wide each cell is.

<div class="container">
  <div class="cell"> ...</div>
  <div class="cell"> .......... </div>
  ...
  <div class="cell"> ..... </div>
</div>


.container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
}

.cell{
  display: inline-block;
  margin: 1px 0.5em 1px 0;
  white-space: nowrap;
}