Divide Array list into 3 column but it not aligned properly in HTML CSS

user_15736642 0
Viewed 155

Array of Object, I have to divide a list into 3 rows that contain Line, which separate two column, so, I have write the following code:-

HTML
let Arr = [
  { num: 'jkjjk' },
  { num: 'jkjjk' },
  { num: 'jkjjkkj dshdjsh jhsjhsdj' },
  { num: 'jkjjkkj dshdjsh jhsjhsdj' },
  { num: 'jkjjkkj  ' },
  { num: 'jkjjkkj  jhsjhsdj' }
];

{Arr.map((element) => (
  <ul className={divide}>
   <li>{element.num}</li>
  </ul>
)}

<div>

CSS

.divide {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid rgba(0, 0, 0, 0);
}

It's works for me but the list of element are not aligned properly, In a row, first column element are on top & the rest of the columns element are on middle or bottom of the row, so, I want to align all the Element in the Column on the top,

Note:- Alignment mismatch may be due to element String have too much length, thats why Its create problem,

Sugget me how to solve this

reactjs css html javascript
1 Answers

Try:

<ul className="divide">
  {Arr.map((element) => (
    <li>{element.num}</li>
  )}
</ul>

CSS

.divide li {
  word-break: break-all;
}
user_88373120
Related