Прокрутка строк в таблице на мобильной версии

109

14 августа 2019, 09:20

Есть такая таблица элементов:

<div class="grid">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
...
</div>

Получается грид в 4 элемента на 2 строки.

Сейчас с адаптивом все элементы просто сдвигаются в зависимости от ширины экрана, до тех пор пока не останется по 1 в строчке. Но задача стоит следующая: в мобильной версии сделать просто скролл этих строк. Казалось бы решается только этим: display: flex; overflow: scroll; Но это дает мне одной строку скролла, а не две. Я бы разделил этот грид на два, но это невозможно, каждый элемент .el генерится самой cms, поэтому я имею в распоряжении код с php типа:

<div class="grid">
<div class="el">
/*много php*/
</div>
</div>

Есть ли какое-то решение этой задачи? Может на php или js?

Answer 1

Ну, теоретически 2 грида можно создавать с помощью js "на лету" и в цикле заполнять их элементами:

const els = document.querySelectorAll('.el'); 
 
const wrap1 = document.createElement('div'); 
const wrap2 = document.createElement('div'); 
wrap1.setAttribute('class', 'grid'); 
wrap2.setAttribute('class', 'grid'); 
 
for(let i=0; i<els.length; i++) { 
  if(i<els.length/2) { 
    wrap1.innerHTML += els[i].outerHTML; 
    els[i].parentNode.replaceChild(wrap1, els[i]); 
  } 
  else { 
    wrap2.innerHTML += els[i].outerHTML; 
    els[i].parentNode.replaceChild(wrap2, els[i]); 
  } 
}

.grid { 
  display: flex; 
} 
.el { 
  width: 200px; 
  height: 50px; 
  border: 1px solid red; 
  margin: 5px; 
  padding: 10px; 
  font-size: 20px; 
}

<div class="el">контент 1</div> 
<div class="el">контент 2</div> 
<div class="el">контент 3</div> 
<div class="el">контент 4</div> 
<div class="el">контент 5</div> 
<div class="el">контент 6</div> 
<div class="el">контент 7</div> 
<div class="el">контент 8</div>