У меня есть массив из 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?
попробуйте с <tr><td> w3schools.com/tags/….
@Sfili_81 Проблема в том, что количество столбцов непостоянно.
@FaroukMhamdi проблема в том, что количество столбцов непостоянно.
да нормально работать с зацикливанием массива данных
скинь сюда свой код я тебе помогу
@FaroukMhamdi использовать таблицу для макета - не очень хорошая идея, этого можно добиться с помощью сетки, но у нас мало информации о коде OP.
да, я сказал ему поделиться кодом здесь
@FaroukMhamdi Я добавил некоторые детали. Я знаю, как разделить массив элементов на два массива с помощью js, а затем я могу использовать сетку или flex для его рендеринга отдельно. Но я хочу знать, есть ли способ сделать это только с помощью CSS?
@ Sfili_81 Я добавил некоторые детали. Я знаю, как разделить массив элементов на два массива с помощью js, а затем я могу использовать сетку или flex для его рендеринга отдельно. Но я хочу знать, есть ли способ сделать это только с помощью CSS?
Прежде чем спросить, вы что-то пробовали? возможно, поищите в Google. Как мне сделать два столбца с помощью CSS? Или поиск здесь, на SO....
Основываясь на ваших примерах, я думаю, что простое 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>
Вы читали какие-нибудь учебники? возможно, сетка или флексбокс..... Я предлагаю попробовать что-нибудь