Make list items in each row match dynamic height-CodePudding

I currently have the code below which produces a resizable list, except the li elements do not match the height of their neighbor. It's similar to the question posted here with the exception that the number of items per row should be dynamic. How can I make each li in a row match that row's highest li while preserving the existing functionality?

List example used in images:

    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra nunc vitae massa elementum ultricies a non ipsum.</li> 
      <li>Nunc porttitor pretium ex, in molestie lacus molestie eget.</li>
      <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </li>
      <li>Fusce faucibus lacus eu tellus interdum aliquet. Donec euismod nisi eu nisi dictum, a tincidunt sapien dictum.</li>
      <li>Fusce aliquet tempus ex quis tincidunt. Donec at varius enim. Nullam elementum laoreet lacus.</li>
      <li>Aenean id volutpat ipsum. Maecenas vulputate odio nec lectus vulputate, cursus volutpat nulla vehicula.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra nunc vitae massa elementum ultricies a non ipsum.</li> 
      <li>Nunc porttitor pretium ex, in molestie lacus molestie eget.</li>
      <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </li>
      <li>Fusce faucibus lacus eu tellus interdum aliquet. Donec euismod nisi eu nisi dictum, a tincidunt sapien dictum.</li>
      <li>Fusce aliquet tempus ex quis tincidunt. Donec at varius enim. Nullam elementum laoreet lacus.</li>
      <li>Aenean id volutpat ipsum. Maecenas vulputate odio nec lectus vulputate, cursus volutpat nulla vehicula.</li>
    </ul>

CSS:

ul {
    overflow: scroll;
    list-style: none;
    resize: horizontal;
    height: 30vh;
    width: 80vw;
    padding: 0px;
}
li {
    background-color: grey;
    vertical-align: top;
    display: inline-block;
    width: 20vw;
    margin: 2px;
}

It produces the following output: resized to show 4 li per row resized to show 3 li per row

CodePudding user response：

Add height: 100%; to your li in CSS:

ul {
    overflow: scroll;
    list-style: none;
    resize: horizontal;
    height: 30vh;
    width: 80vw;
    padding: 0px;
}
li {
    background-color: grey;
    vertical-align: top;
    display: inline-block;
    width: 20vw;
    margin: 2px;
    height: 100%;
}

   <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra nunc vitae massa elementum ultricies a non ipsum.</li> 
      <li>Nunc porttitor pretium ex, in molestie lacus molestie eget.</li>
      <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </li>
      <li>Fusce faucibus lacus eu tellus interdum aliquet. Donec euismod nisi eu nisi dictum, a tincidunt sapien dictum.</li>
      <li>Fusce aliquet tempus ex quis tincidunt. Donec at varius enim. Nullam elementum laoreet lacus.</li>
      <li>Aenean id volutpat ipsum. Maecenas vulputate odio nec lectus vulputate, cursus volutpat nulla vehicula.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra nunc vitae massa elementum ultricies a non ipsum.</li> 
      <li>Nunc porttitor pretium ex, in molestie lacus molestie eget.</li>
      <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </li>
      <li>Fusce faucibus lacus eu tellus interdum aliquet. Donec euismod nisi eu nisi dictum, a tincidunt sapien dictum.</li>
      <li>Fusce aliquet tempus ex quis tincidunt. Donec at varius enim. Nullam elementum laoreet lacus.</li>
      <li>Aenean id volutpat ipsum. Maecenas vulputate odio nec lectus vulputate, cursus volutpat nulla vehicula.</li>
    </ul>

CodePudding user response：

I'd have a look at grid. It works great for just the scenario you're describing and gives you a lot of control over how your rows and columns should behave.

Example/Demo

ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
}

li {
  background: #efefef;
  list-style-type: none;
  padding: 10px;
}

<ul>
      <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
        pharetra nunc vitae massa elementum ultricies a non ipsum.
      </li>
      <li>Nunc porttitor pretium ex, in molestie lacus molestie eget.</li>
      <li>
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas.
      </li>
      <li>
        Fusce faucibus lacus eu tellus interdum aliquet. Donec euismod nisi eu
        nisi dictum, a tincidunt sapien dictum.
      </li>
      <li>
        Fusce aliquet tempus ex quis tincidunt. Donec at varius enim. Nullam
        elementum laoreet lacus.
      </li>
      <li>
        Aenean id volutpat ipsum. Maecenas vulputate odio nec lectus vulputate,
        cursus volutpat nulla vehicula.
      </li>
      <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
        pharetra nunc vitae massa elementum ultricies a non ipsum.
      </li>
      <li>Nunc porttitor pretium ex, in molestie lacus molestie eget.</li>
      <li>
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas.
      </li>
      <li>
        Fusce faucibus lacus eu tellus interdum aliquet. Donec euismod nisi eu
        nisi dictum, a tincidunt sapien dictum.
      </li>
      <li>
        Fusce aliquet tempus ex quis tincidunt. Donec at varius enim. Nullam
        elementum laoreet lacus.
      </li>
      <li>
        Aenean id volutpat ipsum. Maecenas vulputate odio nec lectus vulputate,
        cursus volutpat nulla vehicula.
      </li>
    </ul>