CODEWITHSUNDEEP
javascriptjqueryhtmlcssgrid
Mahsa az
Mahsa az

Reputation: 81

auto-resize columns of a grid with js

I have a grid. I have four columns. The width of each column is 25%. I would like it if one of the column widths exceeds 25%. Column width to be 50%. If the width of one of the columns is more than 50%, the columns become 100%. please help me, thanks

enter image description here

if text width < 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>

if text width >= 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>

if text width >= 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>

Upvotes: 1

Views: 757

Answers (1)

Trapti Rahangdale
Trapti Rahangdale

Reputation: 61

Check out this demo to solve this by CSS Grid, without using media queries. link https://codepen.io/tripti1410/live/Zmoaxr

Upvotes: 1

Related Questions