How to make two columns with CSS?

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:

If we have 9 elements:

If we have 7 elements:

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?

Have you read some tutorials? maybe grid or flexbox..... I'll suggest to try something — Sfili_81, Feb 08 '23 at 08:00
try with https://www.w3schools.com/tags/tag_table.asp#:~:text=The%20element%20defines%20a,%2C%20and%20elements. — Farouk Mhamdi, Feb 08 '23 at 08:04
@Sfili_81 the problem is that the number of columns isn't constant. — Mark13, Feb 08 '23 at 08:08
@FaroukMhamdi the problem is that the number of columns isn't constant. — Mark13, Feb 08 '23 at 08:09
@FaroukMhamdi use table for layout isn't a good idea, it can be achieved with grid, but we have poor information about OP code — Sfili_81, Feb 08 '23 at 08:15
@FaroukMhamdi I've added some details. I know how to split the elements array into two arrays with js and then I may use grid or flex to render it separatelly. But I wish to know if there a way to do it with CSS only? — Mark13, Feb 08 '23 at 08:30
@Sfili_81 I've added some details. I know how to split the elements array into two arrays with js and then I may use grid or flex to render it separatelly. But I wish to know if there a way to do it with CSS only? — Mark13, Feb 08 '23 at 08:30
Before asking have you tried something? maybe search on google _How do I make two columns with CSS?_ Or searching here on SO.... — Sfili_81, Feb 08 '23 at 08:35
[https://stackoverflow.com/questions/44092529/make-grid-container-fill-columns-not-rows](https://stackoverflow.com/questions/44092529/make-grid-container-fill-columns-not-rows) for example.... — Sfili_81, Feb 08 '23 at 08:36

score 1 · Accepted Answer · answered Feb 08 '23 at 08:40

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>

score 0 · Answer 2 · answered Feb 08 '23 at 08:44

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);
}

score 0 · Answer 3 · answered Feb 08 '23 at 08:59

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>

How to make two columns with CSS?

3 Answers3