Можете ли вы использовать grid-auto-flow: density, не зная, сколько элементов сетки у вас будет?

Question

Я пытаюсь стилизовать список функций и хотел бы разместить их в плотной сетке, но не смог этого сделать.

В настоящее время функции представлены с использованием гибкий бокс. В качестве общего примера:

.list {
  width: 400px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.list-item.short {
  background-color: green;
  width: 100px;
}

.list-item.medium {
  background-color: blue;
  width: 200px;
}

.list-item.long {
  background-color: red;
  width: 300px;
}

<ul class="list">
  <li class="list-item medium">MEDIUM</li>
  <li class="list-item medium">MEDIUM</li>
  <li class="list-item long">LONG</li>
  <li class="list-item short">SHORT</li>
  <li class="list-item long">LONG</li>
  <li class="list-item short">SHORT</li>
  <li class="list-item long">LONG</li>
</ul>

Если вы запустите фрагмент, вы увидите пробелы в псевдокоде рядом с элементами длины medium, которые я хотел бы заполнить символом short длина элементов.

Итак, получаем от:

Кому:

Мне казалось, что grid-auto-flow: row dense идеально подходит для этого, хотя я не могу заставить его работать. Есть ли способ сделать это?

На что стоит обратить внимание: в реальной жизни я не знаю длины, порядка и количества проходящих функций.

Я надеялся на это было бы просто, как:

.list {
  width: 400px;
  list-style: none;
  display: grid;
  grid-auto-flow: row dense;
} 

Но это не помогает - есть ли способ расположить столбцы / строки для этого? Интересно, работает ли dense только для подключения предметов вокруг других с фиксированным grid-area?