DEV Community

Discussion on: 1 line of code: How to split an Array in half

View post

Replies for: You have view with dynamic columns. You want to display all the data within the array evenly between these columns. As columns are added/removed yo...

Collapse
 
frankwisniewski profile image
Frank Wisniewski • • Edited

In my opinion, the alignment of columns is done in CSS.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .myList{
     column-count: 2; 
     column-width: 50%;
     column-rule-style:dotted; 
     column-rule-width:1px; 
    }
    .myList p{
      display:inline-block;
      width:100%;
    }
  </style>
</head>
<body>
<div class="myList" id=myContainer></div>
<script>
    let myArray=[1,1,5,3,4,5,6,7,8,1,12,13,15,16]
    let myHTML = ''
    myArray.map(el => myHTML += '<p>'+el+'</p>')
    myContainer.innerHTML=myHTML         
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
jamesthomson profile image
James Thomson •

Yes, you can definitely use css columns, but sometimes you just need things or flexible. Maybe it's not a column, but a grid. Or maybe you start with columns, but can divide them into grids (like in VSCode).

Another use case could be splitting up players into teams. If you have a group of players and you need to make equal teams, then you'll need to split that array.

Thread Thread
 
frankwisniewski profile image
Frank Wisniewski •

far fetched...but OK, enough words for such an simple function....

Thread Thread
 
jamesthomson profile image
James Thomson •

You said you didn't see any use cases, I'm merely presenting them to you. Do what you will with it.