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
Try:
<ul className="divide">
{Arr.map((element) => (
<li>{element.num}</li>
)}
</ul>
CSS
.divide li {
word-break: break-all;
}