How to make two columns with CSS? - html

Question

I have an array of N elements:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
I need to make two columns in following order:
If we have 10 elements:
1 6
2 7
3 8
4 9
5 10
If we have 9 elements:
1 6
2 7
3 8
4 9
5
If we have 7 elements:
1 5
2 6
3 7
4
And so on. CSS should devide elements into two columns.
The number of elements isn't a constant.
The code in react is pretty simple:
numList.map(item => (
<div>{item}</div>
))
I can devide elements array into two arrays using js and then render it as two list separatelly and make columns for it with flex.
But I wish to know if there a way to do it with CSS only without JS.
How do I make two columns with CSS?

Answer 1

Based on your examples, I think just a simple columns: 2 would have this functionality.
body {
display: flex;
flex-direction: column;
gap: 20px;
}
.wrapper {
columns: 2;
border: 1px solid black;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>

Answer 2

You can use grid-template-columns property and specifies the number (and the widths) of columns in a grid layout. The values are a space separated list, where each value specifies the size of the respective column.
Refer this: CSS Grid Layout Module
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 20px 20px;
}
For this example, I specified each column only 20px width, you can put your own numbers or auto for the width.
You can also use repeat function to repeat same pattern of column multiple of times. For example:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 50px);
}

Answer 3

Best way is to give class to parent div and give display as grid and in column give how many element you want in one column
.container{
display:grid;
grid-template-columns: repeat(5,1fr)}
<div class="container">
<div></div>
<div></div>
<div></div>
</div>