Organize list items in multiple columns

user_2033678 0
Viewed 49

I have a very simple list with elements and I want to display it in multiple columns. what´s the best approach to do it?

const names = ["ferrari", "porsche", "audi", "ford", "fiat", "mercedes"]

<ul>
    {names.map(name => (<li>{name}</li>))}
</ul>

how can I display it in 3 columns like this

ferrari        porsche        audi
ford           fiat           mercedes

I can use flexbox o whatever it takes! thank you

reactjs css
3 Answers

You can just put this style and it will give you 3 columns.

const names = ["ferrari", "porsche", "audi", "ford", "fiat", "mercedes"]

 <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gridGap: 20 }}>
    {names.map(name => ( <div>{name}</div>))}
  
  </div>
user_107202960

Try with grid :)

const names = ["ferrari", "porsche", "audi", "ford", "fiat", "mercedes"];
ul {
  height: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
li {
  list-style-type: none;
}
<ul>

  <li>23</li>
  <li>3</li>
  <li>4</li>
  <li>55</li>
  <li>6t</li>
  <li>2</li>
</ul>

user_122596430

Why not use easy javascript snippet? Using this code you can easily sort any arraylengths with any rows or columns. I have taken a lot more array members. You can easily sort any array length easily using javascript. Hope it helps!

<html>
<head>
    <title></title>
</head>
<body>
    <table class="table"></table>
<script>
    let names= ["ferrari", "porsche", "audi", "ford", "fiat", "mercedes","ferrari", "porsche", "audi", "ford", "fiat", "mercedes","ferrari", "porsche", "audi", "ford", "fiat", "mercedes","ferrari", "porsche", "audi", "ford", "fiat", "mercedes"]
    let ength = names.length;
    let i=0;
    let tbval=document.querySelector(".table");
for(k=0;k<ength;k=k+3){
    let xx =tbval.insertRow();
    xx.insertCell(0);
    tbval.rows[i].cells[0].innerHTML=names[k];
xx.insertCell(1);
    tbval.rows[i].cells[1].innerHTML=names[k+1];
    xx.insertCell(2);
    tbval.rows[i].cells[2].innerHTML=names[k+2];
i++;
}
</script>
</body>
</html>
user_138387850
Related