Как бы вы сверстали этот блок?

Question

[Lord_Dantes]

Его еще нужно на ВП прикрутить типо 1 кружочек = 1 пост. Как можно такое реализовать?
Мб какой-то изотопе но в таком стиле?

Comments

[Rustam Bainazarov]

Position absolute чистой воды.

Динамика — это уже к JS. Можно и не Isotope для сортировки, только он не будет так позиционировать.

Самый простой путь — прописать стили (размеры и позиции) с помощью :nth-child.

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

Можно и на JS рассчитывать позицию, исходя из размеров блоков и из количества, но всё равно с точки зрения CSS — это absolute.

Можете, конечно, сделать ещё сетку обычную, а потом с помощью translate (или margin) сдвигать каждый блок в нужное место.

[Сергей delphinpro]

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

[Rustam Bainazarov]

Сергей delphinpro, ну, собственно, это я как раз и дописал в ответ выше. Но это ещё большим костылём выходит, на мой взгляд.

Такая шняга есть на Stripe.com — там на absolute расположены такие кружки, но конечную позицию считает JS, чтобы не было столкновения.

[Сергей delphinpro]

Рустам Байназаров, смотря как будет использоваться. Если просто ссылки — то вполне сгодится.

[Lord_Dantes]

Рустам Байназаров, Сергей delphinpro, вообще как я планировал изначально.
По ВП лучше чтобы элементы были все дочерние какого-то родителя, потому-что я не представляю как их выводить потом в кружки это посты. Кружков будет много штук 20-30 тоже где-то, то есть постами это сделать можно но тут проблемка с шаблоном, те походу не возможно сделать шаблон который будет универсальный под посты.
А что если будут прямые ряды думаю флексом можно будет сделать.

Answer 1

[Максим]

Топорное решение но думаю можно доделать это https://codepen.io/topicstarter/pen/oKaeMw
margin-left: и салам алейкум

Comments

[Lord_Dantes]

Благодарю