0

I have an UL LI list dynamically generated from database (so that I can't change or edit this list.) This list is long, I need to break it to 2 columns by this CSS:

ul {
  list-style: none;
  height: 100px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
}

Everything looks as expected, but there is a long text in cell 8 that makes an empty space in cell 2 (green arrow).

enter image description here

I try couple ways in CSS to bring text in cell 2 and cell 3 close together (without a white gap), but is not successful.

Note: length of text may be changed anytime so that CSS should be dynamic.

Please give me a hand. Thanks

ul {
  list-style: none;
  height: 100px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
}
li {
  padding-right: 30px;
  border: 1px solid red
}
<ul>
  <li>1. Lorem ipsum dolor sit amet</li>
  <li>2. Lorem ipsum dolor sit amet</li>
  <li>3. Lorem ipsum dolor sit amet</li>
  <li>4. Lorem ipsum dolor sit amet</li>
  <li>5. Lorem ipsum dolor sit amet</li>
  <li>6. Lorem ipsum dolor sit amet</li>
  <li>7. Lorem ipsum dolor sit amet</li>
  <li>8. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
  <li>9. Lorem ipsum dolor sit amet</li>
  <li>10. Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
</ul>
abcid d
  • 2,821
  • 7
  • 31
  • 46
  • 1
    Grid, as it’s name suggests, can’t achieve the layout you want. What about using CSS columns or flexbox? – Terry Jan 21 '22 at 23:09

1 Answers1

0

If you want content to flow in columns, use the columns property.

If you want the items to not split across columns, use break-inside: avoid.

And if you want to control the space between the columns you can use column-gap.

ul {
  columns: 2;
  column-gap: 2em;
}
li {
  border: 1px solid red;
  break-inside: avoid;
}
<ul>
  <li>1. Lorem ipsum dolor sit amet</li>
  <li>2. Lorem ipsum dolor sit amet</li>
  <li>3. Lorem ipsum dolor sit amet</li>
  <li>4. Lorem ipsum dolor sit amet</li>
  <li>5. Lorem ipsum dolor sit amet</li>
  <li>6. Lorem ipsum dolor sit amet</li>
  <li>7. Lorem ipsum dolor sit amet</li>
  <li>8. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
  <li>9. Lorem ipsum dolor sit amet</li>
  <li>10. Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
</ul>
zzzzBov
  • 174,988
  • 54
  • 320
  • 367