javascript - 2 列 CSS 中不同列表中元素的高度相同

Question

请帮助我。我在这里和其他地方搜索与我的情况相同的示例，但没有找到我需要的。我有两列不同的动态列表。在一列中，5 个列出元素(标题)，5 个列出其他元素(每个元素的描述)。它们可能多于或少于 5 件。但列中的数量列表项始终相同。我需要一列中每个元素的高度与另一列中的高度相对应。您能告诉我如何做到这一点，或者显示手册的链接来解决我的问题吗？谢谢您的帮助!

.columnlist {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-areas: "sortable1 sortable2";
  padding: 20px;
}

.columnlist ul {}

#sortable1 {
  grid-area: sortable1;
}

#sortable1 li {
  padding: 10px;
  margin: 5px 0;
  border: solid 1px black;
}

#sortable2 {
  grid-area: sortable2;
}

#sortable2 li {
  background: rgb(255, 250, 205);
  padding: 10px;
  margin: 5px 0;
  border: solid 1px black;
}

ul {
  list-style: none;
}

ol,
ul {
  margin: 0;
}

<div class="columnlist">
  <ul id="sortable1">
    <li>title 1</li>
    <li>title 2</li>
    <li>title 3</li>
    <li>title 4</li>
    <li>title 5</li>
  </ul>
  <ul id="sortable2">
    <li>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
    <li>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum.</li>
  </ul>
</div>

Code on codepen

Answer 1

.columnlist {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-areas: "sortable1 sortable2";
  padding: 20px;
}

.columnlist ul {}

#sortable1 {
  grid-area: sortable1;
  display: grid;
}

#sortable1 li {
  padding: 10px;
  margin: 5px 0;
  border: solid 1px black;
}

#sortable2 {
  grid-area: sortable2;
  display: grid;
  grid-auto-rows: 1fr;
}

#sortable2 li {
  background: rgb(255, 250, 205);
  padding: 10px;
  margin: 5px 0;
  border: solid 1px black;
}

ul {
  list-style: none;
}

ol,
ul {
  margin: 0;
}

<div class="columnlist">
  <ul id="sortable1">
    <li>title 1</li>
    <li>title 2</li>
    <li>title 3</li>
    <li>title 4</li>
    <li>title 5</li>
  </ul>
  <ul id="sortable2">
    <li>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
    <li>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. </li>
    <li>5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet vestibulum risus, vitae condimentum mi. Vivamus eu finibus dui. Fusce mollis lorem vel dui imperdiet, nec viverra lectus tempus. Morbi laoreet urna non urna sodales, non
      feugiat diam rutrum.</li>
  </ul>
</div>