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

Question

我有一个网格。我有四列。每列的宽度为25％。如果列宽之一超过25％，我希望这样做。列宽为50％。如果其中一列的宽度大于50％，则列变为100％。请帮助我，谢谢

• 注释：
  1. 每列=>文本溢出（4-col => 2-col）
  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