1

I'm trying to display a list of items with different content in each item, which makes the height of these items different.

I need 2 vertical columns with a maximum of 6 items per column.

However this makes each item the same height as the tallest item in the list, which I don't want.

Is there any way to solve this?

.container {
   display: grid;
   grid-template-rows: repeat(6, 1fr);
   grid-auto-flow: column;
}
    <ul class="container">
    <li>Item 1</li>
    <li> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum debitis dolorum quod impedit neque explicabo minus odit iusto esse accusantium dignissimos quas atque ab natus, omnis fugit incidunt quos officiis! Libero exercitationem in rem. </li>
    <li >Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>
keyboard_connection
  • 31
  • 4

1 Answers1

0

The grid-row span value will allow a row to occupy more space

.container {
   display: grid;
   grid-template-rows: repeat(6, 1fr);
   grid-template-columns: repeat(2, 1fr);
   gap: 10%;
}

.twoRows {
  grid-row: span 4;
}

And for the row that needs more space, give it that class.

  <ul class="container">
    <li>Item 1</li>
    <li class="twoRows"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum debitis dolorum quod impedit neque explicabo minus odit iusto esse accusantium dignissimos quas atque ab natus, omnis fugit incidunt quos officiis! Libero exercitationem in rem. </li>
    <li >Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    
    
</ul>

Does this achieve what you need?

Tristan Charles Boniface
  • 11
  • 1
  • 3