Как использовать HTML/CSS, чтобы элементы охватывали сетку, если в строке меньше элементов, чем столбцов? ⇐ Html

[Anonymous]

Я пытаюсь создать сетку с тремя столбцами, но если в данной строке меньше трех элементов, я хочу, чтобы эти элементы занимали всю ширину сетки. Я включаю снимок экрана моего текущего макета, редактирование, показывающее то, что я хотел бы, и фрагменты моего HTML и CSS:
Текущий макет (Примечание: заголовок вверху выполнен с помощью отдельной сетки, чем заголовок с изображениями. Если есть лучший способ сделать это, буду признателен за любую помощь.):


Желаемый макет:


HTML:
Botanicals




Cherry Blossoms



Happy Plants



Lucky Bamboo



Mini Orchid



Sunflowers



CSS:
#grid-title{
display: grid;
grid-template-columns: auto;
border: 1px solid black;
background-color: var(--navbarbg);
text-align: center;
}

#grid-body{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
text-align: center;
}

#grid-item{
justify-content: center;
border: 1px solid black;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... tems-in-th