HelpSophie
@HelpSophie

Как заставить css grid не пропускать строки?

Есть список из элементов трех типов, у каждого типа есть свой класс, тут нормально. Нужно, чтобы элементы одного типа попадали в свою колонку.
Пробовала решить это с помощью grid-column и соответствующий номер.
Но при таком раскладе почему-то пропускаются строки.

Песочница https://jsfiddle.net/chr27nub/

Как избавится от пропусков?

Должно получиться вот такое
5ecaf5b81c075732194248.png
  • Вопрос задан
  • 116 просмотров
Решения вопроса 1
@forspamonly2
grid: auto-flow dense / repeat(3, 100px);

Ответ написан
Пригласить эксперта
Ответы на вопрос 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
Переставлять элементы нельзя, они прилетают с бэка в неизвестном порядке.


Прямо во время вывода и выводить их в свои места. Это явный двумерный массив. Который ты спокойно выведешь, как только поймешь, как с ним работать. Если быть точнее, двумерная проходка, к двумерному массиву можно и стоило бы привести для сортировки.

Приведу грубый пример на псевдокоде:
cols1 = []
cols2 = []
cols3 = []

for(i = 0; i < x; i++) { // Где x = размер самого большого массива
for(j = 0; j < 3; j++) { // Потому что колонок 3
if j == 0:
     print(cols1[i])
...


Естественно, надо предусмотреть пустые вхождения-заглушки, или заранее прописать классы для n+ элемента, чтобы они вставали в свою колонку, при это не фиксирую жестко их строку. Все элементарно.
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Для начала создадим общий контейнер:

<div class="cont"></div>

Затем вложим в него три блока/списка:

<ul class="block-1"></ul>
<ul class="block-2"></ul>
<ul class="block-3"></ul>


В блок/список под номером 3, будут прилетать с бека элементы, которые позже можно сортировать с помощью цикла/циклов и перемещать в другие блоки.

Перемещать нужно элементы с классом element-1 и element-2, а элементы с классом element-3 можно оставить в родном блоке под номером 3.

То есть общая структура получается примерно такой:

<div class="cont">
  <ul class="block-1"></ul>
  <ul class="block-2"></ul>
  <ul class="block-3">
    <li class="element element-2">2</li>
    <li class="element element-1">1</li>
    <li class="element element-3">3</li>
    <li class="element element-2">2</li>
    <li class="element element-3">3</li>
    <li class="element element-2">2</li>
    <li class="element element-3">3</li>
    <li class="element element-1">1</li>
    <li class="element element-3">3</li>
    <li class="element element-2">2</li>
  </ul>
</div>


С помощью CSS настраиваем дизайн, адаптивность и всё что нужно. Сортировкой элементов займётся JS:

const element_ONE = document.querySelectorAll(".element-1");
const element_TWO = document.querySelectorAll(".element-2");
const cont_ONE = document.querySelector(".block-1");
const cont_TWO = document.querySelector(".block-2");

element_ONE.forEach((el) => {
  cont_ONE.appendChild(el);
});

element_TWO.forEach((el) => {
  cont_TWO.appendChild(el);
});


Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы