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

Question

我有一个网格。我有四列。每列的宽度为 25%。如果其中一个列宽超过 25%，我会喜欢它。列宽为 50%。如果其中一列的宽度超过 50%，则列变为 100%。请帮助我，谢谢

• 笔记：
  1. 每列 => 文本溢出（4-col => 2-col）
  2. 页面大小是固定的（无响应）。例如，如果放大字体大小或放大文本，则 4-col 网格将转换为 2-col 网格（50%）
  3. 高度是固定的并且是单行的。

如果文本宽度 < 25% => 4-col

<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-col

<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-col

 <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>

标签： javascriptjqueryhtmlcssgrid

Answer 1

查看此演示以通过 CSS Grid 解决此问题，而无需使用媒体查询。link https://codepen.io/tripti1410/live/Zmoaxr