Как правильно сделать такой скрипт?

Question

[Игорь]

Не могу понять как сделать логику что бы если эллементов будет 5-8 что бы .item-content 5го-8го элемента появлялся под 2м рядом, а 1-4 под 1-4
Так же не понимаю как это сделать все это адаптивным
https://codepen.io/anon/pen/xYLmKo

Answer 1

[Николай Чуприк]

Вы как-то непонятно объяснили, чего хотите видеть, но в любом случае, мне кажется, {display : grid} —лучший вариант, с inline ловить нечего.

Что касается адаптивности, то проблема не сделать адаптивным, а придумать, как это должно выглядеть в адаптивном варианте. Если опишите, то тогда есть предмет для обсуждения, а пока его нет.

Это же не весь сайт. Мы тут не знаем какой там ещё будет контент, и что из него важно. Может быть в мобильной версии все эти замечательные svg-логотипы надо свернуть до пиктограмм и засунуть куда подальше, а может наоборот каждый из блоков надо сделать на весь экран и выставить их вертикально.

Comments

[Игорь]

Спасибо, прошу прощения за не достаточное количество конкретики
В мобильной версии 2 варианта в ряд и на 320 пикселей один
Больше никакого контента не планирую, это не рабочий вариант, хочу понять как планировать и потом приводить в жизнь такие несложные решения, но что бы это было парктично и в дальнейшем прикруть какую нибудь cms

[Николай Чуприк]

1. После <div class="items"></div> просто вставьте <br clear="all"/>

2. Добавьте в CSS

@media screen and (max-width: 320px)	{
.items .item {
  width: 100%;
}

[Игорь]

Николай Чуприк, Спасибо, но в таком случае если информация отображается после всех предметов, а я хочу сделать что бы под каждым рядом отображалась информация о 4х пунктах
а если 5й то уже в следующем

[Игорь]

Вот я наглядно постарался показать
Так же хочу сделать что бы если открыта информация из первого ряда и вызвать информацию со второго, что бы сворачивалась и была доступна информация только об одном предмете