Как сделать CSS сетку Заполнить все доступные места в зависимости от размера экрана без использования медиа-запросов

Question

Обратите внимание: использование 200 пикселей просто для того, чтобы проиллюстрировать то, что я пытаюсь достичь вертикальное пространство смотрового окна? Мне нужно изменить размер элементов независимо от их количества, но все они должны умещаться на экране без каких-либо пробелов.

Итак, вместо верхнего изображения выглядите как нижнее.

Regardless of the number of items, they will always take up all of the space on the screen.

Here is a sample code of what I am trying to do:

 Пункт 1  Пункт 2  Пункт 3  Пункт 4  Пункт 5  Позиция 6   

CSS:

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

#content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-flow: dense;
    grid-gap: 10px;
}

ul#content-grid li {
    background-color: bisque;
    height: 200px;
}