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
  • 11
  • 2

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?

Andrew Dawod
  • 1
  • 1
  • 1
  • I ended up separating the arrays between left and right and just use flexbox, It seemed easier than using css in this particular case. Thanks alot though! – keyboard_connection Dec 23 '21 at 14:48
  • No worries. Here's a cool video I always refer to when struggling with layout: https://www.youtube.com/watch?v=hs3piaN4b5I&ab_channel=LayoutLand – Andrew Dawod Dec 23 '21 at 14:50