Автоматическая настройка размера текста в CSS в зависимости от количества элементов в сетке

Question

Вот мой код CSS:

#my_div {
    display: grid;
    grid-template-rows: 30px;
    grid-template-columns:1fr ;
    grid-gap: 0.2rem;
    grid-auto-flow: column;
    padding-bottom: 2em;
    padding-left: 2em;
}

Это строка высотой 30 пикселей, где элементы (все они JQuery UI виджеты) выстроены в линию и текут горизонтально.

Когда яимеют "слишком много" элементов, они переполняются. Я хотел бы, чтобы они уменьшили свой размер, чтобы соответствовать.

Мой обходной путь следующий:

#my_div label {
    font-size: 14px; /* Or whatever smaller value makes everything fit */
}

#my_div .ui-widget {
    font-size: 14px; /* Or whatever smaller value makes everything fit */
}

Есть ли способ автоматически настроить этот размер вместо необходимости делатьэто вручную?

Answer 1

Попробуйте установить размер шрифта в %, например

@media only screen and (max-width: 1023px) {
  #my_div label {
    font-size: 100%;
  }
}
@media only screen and (max-width: 767px) {
      #my_div label {
        font-size: 50%;
      }
    }

и т. Д.