Ребят, есть такая вот вёрстка (см. изображение) реализовал при помощи grid. Идея реализации постов, когда пользователь нажимает по посту, то тот разворачивается на всю ширину в том месте, где был изначально, а блоки что рядом, смещаются.
вот так это выглядит на примере
нажимаем по 5 блоку и тот растягивается на всю ширину. блоки, что рядом смещаются относительно 5 блока.
на другом ресурсе мне помогли и слепили такой вот код (codepen), но он не очень хорошо функционирует. отказывается работать на jquery 2.x.x, похоже, что он нормально робит только на v3.4.1+, что странно, непонятно почему не хочет. скорее всего, это связано с псевдоэлементом before...
если есть идеи, то прошу помощи, спасибо.
и вариант кода на чистом js.
let block = document.querySelector(".block");
let number;
for (let i = 0; i < items.length; i++) {
items[i].addEventListener('click', (e) => {
items.forEach(item => item.classList.remove('active'));
e.target.classList.add('active');
number = i + 1;
if (number % 3 == 2) {
block.style.setProperty('--column', '1/3');
block.style.setProperty('--display', 'block');
} else if (number % 3 == 1) {
block.style.setProperty('--display', 'none');
} else if (number % 3 == 0) {
block.style.setProperty('--column', '1/2');
block.style.setProperty('--display', 'block');
}
})
}
если использовать код на чистом js, то всё бы хорошо, но, при нажатии на .item, класс .active привязывается к любому элементу внутри .item. на какой нажал к тому и привяжется)
p.s. ссори, спойлеры тут странно работают, поэтому - полотно.