0

please help me. I search examples for something the same as my case here and in other places but not find as I need. I have 2 columns with different dynamic lists. In one column 5 list elements (title) and 5 lists other elements (description for each element). They are maybe more or less then 5 items. But quantity list items in columns are always the same. I need the height of each element in a column to correspond to the height in another column. Can you show me how I can do it, or show links with the manual to resolve my problem? Thank you for help!

.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

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Rostyslav Avtodiychuk
  • 11
  • 2

1 Answers1

2

.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>
demkovych
  • 7,827
  • 3
  • 19
  • 25