Javascript 使用js自动调整网格列的大小

我有一个网格。我有四个专栏。每列的宽度为25%。我想它，如果其中一列宽度超过25%。列宽为50%。如果其中一列的宽度超过50%，则该列将变为100%。请帮帮我，谢谢

• 注意：
• 每列=>文本溢出（4列=>2列）
• 页面大小是固定的（无响应）。例如，如果字体大小被放大或文本被放大，4列网格将转换为2列网格（50%）
• 高度固定且为单线

如果文本宽度<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>

文本长度：short=>4列

项目1
项目2
项目3
项目4

如果文本宽度>=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>

文本长度：中等=>2列

项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目s1
项目2
项目3
项目4

如果文本宽度>=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>

文本长度：大=>1列

项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目11
项目2
项目3
项目4

查看此演示，通过CSS网格解决此问题，无需使用媒体查询<代码>链接

查看flexbox或CSS网格。