Как сделать две колонки с помощью CSS?

У меня есть массив из N элементов:

<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>

Мне нужно сделать два столбца в следующем порядке:

Если у нас есть 10 элементов:

1 6
2 7
3 8
4 9
5 10

Если у нас есть 9 элементов:

1 6
2 7
3 8
4 9
5 

Если у нас есть 7 элементов:

1 5
2 6
3 7
4 

И так далее. CSS должен разделять элементы на две колонки.

Количество элементов не является константой.

Код в реакции довольно прост:

numList.map(item => (
            <div>{item}</div>
          ))

Я могу разделить массив элементов на два массива с помощью js, а затем отобразить его как два списка отдельно и создать для него столбцы с помощью flex.

Но я хочу знать, есть ли способ сделать это с помощью CSS только без JS.

Как сделать два столбца с помощью CSS?

Вы читали какие-нибудь учебники? возможно, сетка или флексбокс..... Я предлагаю попробовать что-нибудь

Sfili_81 08.02.2023 09:00

попробуйте с <tr><td> w3schools.com/tags/….

Farouk Mhamdi 08.02.2023 09:04

@Sfili_81 Проблема в том, что количество столбцов непостоянно.

Mark13 08.02.2023 09:08

@FaroukMhamdi проблема в том, что количество столбцов непостоянно.

Mark13 08.02.2023 09:09

да нормально работать с зацикливанием массива данных

Farouk Mhamdi 08.02.2023 09:10

скинь сюда свой код я тебе помогу

Farouk Mhamdi 08.02.2023 09:11

@FaroukMhamdi использовать таблицу для макета - не очень хорошая идея, этого можно добиться с помощью сетки, но у нас мало информации о коде OP.

Sfili_81 08.02.2023 09:15

да, я сказал ему поделиться кодом здесь

Farouk Mhamdi 08.02.2023 09:21

@FaroukMhamdi Я добавил некоторые детали. Я знаю, как разделить массив элементов на два массива с помощью js, а затем я могу использовать сетку или flex для его рендеринга отдельно. Но я хочу знать, есть ли способ сделать это только с помощью CSS?

Mark13 08.02.2023 09:30

@ Sfili_81 Я добавил некоторые детали. Я знаю, как разделить массив элементов на два массива с помощью js, а затем я могу использовать сетку или flex для его рендеринга отдельно. Но я хочу знать, есть ли способ сделать это только с помощью CSS?

Mark13 08.02.2023 09:30

Прежде чем спросить, вы что-то пробовали? возможно, поищите в Google. Как мне сделать два столбца с помощью CSS? Или поиск здесь, на SO....

Sfili_81 08.02.2023 09:35
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
12
84
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Основываясь на ваших примерах, я думаю, что простое columns: 2 будет иметь эту функциональность.

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>

Вы можете использовать свойство grid-template-columns и указать количество (и ширину) столбцов в макете сетки. Значения представляют собой список, разделенный пробелами, где каждое значение определяет размер соответствующего столбца.

Обратитесь к этому: Модуль CSS Grid Layout

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

Для этого примера я указал ширину каждого столбца только 20 пикселей, вы можете указать свои собственные числа или авто для ширины. Вы также можете использовать функцию повтора для многократного повторения одного и того же шаблона столбца. Например:

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 50px);
}

Лучший способ - дать класс родительскому div и отобразить его в виде сетки, а в столбце указать, сколько элементов вы хотите в одном столбце.

.container{
display:grid;
grid-template-columns: repeat(5,1fr)}

<div class = "container">
<div></div>
<div></div>
<div></div>
</div>

Другие вопросы по теме