автоматическое изменение размера столбцов сетки с помощью js

Question

У меня есть сетка. У меня есть четыре столбца. Ширина каждого столбца составляет 25%. Мне бы хотелось, чтобы одна из ширин столбцов превышала 25%. Ширина колонки должна быть 50%. Если ширина одного из столбцов превышает 50%, столбцы становятся равными 100%. пожалуйста, помогите мне, спасибо

• примечание:
  1. каждый столбец => переполнение текста (4-столбец => 2-столбец)
  2. Размер страницы фиксированный (без ответа). Например, если размер шрифта увеличен или увеличен текст, сетка из 4 столбцов будет преобразована в сетку из 2 столбцов (50%)
  3. Высота является фиксированной и состоит из одной строки.

, если ширина текста <25% => 4 столбца

<h2>text length: short  => 4column </h2>
  <ul class="grid cards">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

, если ширина текста> = 25% => 2 строки

<h2>text length: medium  => 2column </h2>

  <ul class="grid cards">
    <li>item 1 item 1 item 1 item 1item 1 item 1 item 1item 1item 1item s1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

, если ширина текста> = 50% => 1 строка

 <h2>text length: large  => 1column </h2>
  <ul class="grid cards">
    <li>item 1 item 1 item 1 item 1item 1 item 1 item 1item 1item 1item sitem 1 item 1item 1item 1item sitem 1 item 1 item 1 item 1item 1 item 1 item 1item 1item 1item  1 item 1 item 1 item 1item 1 item 1 item 1item 1item 1item s11</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

Answer 1

Проверьте эту демонстрацию, чтобы решить эту проблему с помощью CSS Grid, без использования медиа-запросов. link https://codepen.io/tripti1410/live/Zmoaxr