Как реализовать развёртывание div на всю ширину с переносом соседних блоков?

Question

[Aison]

Ребят, есть такая вот вёрстка (см. изображение) реализовал при помощи grid.
Идея реализации постов, когда пользователь нажимает по посту, то тот разворачивается на всю ширину в том месте, где был изначально. (значит, что он никуда не переносится, остаётся на своём месте).

вот так это выглядит на примере

до нажатия

после нажатия

нажимаем по 5 блоку и тот растягивается на всю ширину. блоки рядом перемещаются выше, относительно 5 блока. 1 блок переместился на новую линию, относительно блоков 2, 3, 4.

Может grid и способен это воплотить, но что-то я не могу это в коде передать. flex, если и сможет, то кода будет многовато. если есть идеи, то прошу помощи, спасибо.

Answer 1

[Ankhena]

https://jsfiddle.net/21hvafnd/
Если нужно смещать предыдущие блоки, допишите это в js
Так со смещением https://jsfiddle.net/jzqahewd/

Comments

[Aison]

спасибо, Ваш вариант проще будет. только да, у меня проблема со смещением)

[Ankhena]

Aison, выяснять порядковый номер на js, через кастомные свойства задавать grid-column для псевдоэлемента, чтобы он занимал 0, 1 или 2 "клетки"

[Aison]

Ankhena, оки, спасибо

[Ankhena]

Aison, добавила в ответ

[Aison]

Ankhena, благодарствую, сударыня. есть киви?

[Ankhena]

Aison, спасибо за заботу :)
Но это же не фриланс.
Мне было даже интересно подумать над вашей задачкой.

[Aison]

Ankhena, но я ведь не против) а можно его на jquery перевести, если Вам не сложно.

[Ankhena]

Aison, вроде так https://jsfiddle.net/3ra56o0j/
забыла я уже как на JQ пишут

[Aison]

Ankhena, робит, но почему-то на версии jquery 3.4.1, а не версии 2.2.4 отказывается нормально работать 0_0. интересное поведение. точнее на версии 2.2.4 не робит вовсе, консоль ничего не говорит, данные в переменные просто не вставляются.

[Ankhena]

Aison, видимо, не умеет работать с кастомными свойствами или делает это как-то по-другому. Перепишите на классы.
Или возьмите чистый js и не заморачивайтесь на JQ.

[Aison]

Ankhena, похоже на то. в общем, Вам может интересно увидеть такой вариант реализации:

$(document).ready(function () {
	let block = document.querySelector("#content");
	let items = [...block.querySelectorAll("div.tera")];
	let cols = getComputedStyle(block).gridTemplateColumns.split(' ').length;
	block.addEventListener('click', (ev) => {
	  let target = ev.target.closest('.tera');
	  if (!target) return;
	  items.forEach((item) => { item.classList.remove('posyactiv'); });
	  target.classList.add('posyactiv');
	  let index = items.indexOf(target);
	  block.style.setProperty('--display', (index % cols == 0 ? 'none' : 'block'));
	  block.style.setProperty('--column', `1/${(index + 1 == cols) ? 0 : cols - (index % cols) + 1}`);
	  $('html,body').animate({scrollTop:$('.posyactiv').offset().top+"px"},{duration:1E3});
	});
});

всё же, может скинете реквизиты?) и у меня JQ уже используется. если уже есть, то почему бы не использовать по полной. да и код короче.