Как 4pda создал практически одинаковую grid сетку?

Dmitriy_2014
На сайте с 01.07.2014
Offline
344
429

Всем привет!

Не могу понять, как можно создать одинаковую сетку на новомодном grid layout’е, чтобы я не делал, всегда она кривая какая-то, но у них тоже есть моменты со съездом, но у меня так вообще капец.

Длинна всех заголовков и анонсов выдержки из статей всегда разная, типа нужно контролить длину или как-то иначе следить за выводом… Если это так, то это ваще отстой!

Заранее всем спасибо за ответы!
totamon
На сайте с 12.05.2007
Offline
437
#1
хоть примеры дай скринами, что за grid layout " новомодный  "🤔 в каком именно месте 4пда? ну и свою со съездами...
Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
M
На сайте с 13.12.2017
Offline
65
mmp
#2
Dmitriy_2014 :

Всем привет!

Не могу понять, как можно создать одинаковую сетку на новомодном grid layout’е, чтобы я не делал, всегда она кривая какая-то, но у них тоже есть моменты со съездом, но у меня так вообще капец.

Длинна всех заголовков и анонсов выдержки из статей всегда разная, типа нужно контролить длину или как-то иначе следить за выводом… Если это так, то это ваще отстой!

Заранее всем спасибо за ответы!

Если сетка на homepage, то ничего не мешает посмотреть в CSS и сделать по аналогии.
Еще гляньте, как интересно сделаны стили в рекомендательном виджете Яндекса, который умеет выводить ровную сетку.

Aurums
На сайте с 28.02.2020
Offline
75
#3
Возьми за пример хлебные крошки, и все поймешь) А то так сложно изложил, что там открытие года)
Dmitriy_2014
На сайте с 01.07.2014
Offline
344
#4
totamon #:
хоть примеры дай скринами, что за grid layout " новомодный  "🤔 в каком именно месте 4пда? ну и свою со съездами...
https://4pda.to, съезды, я имею ввиду у них там тоже есть при разных длине заголовков, а своей нету т.к. при попытке сделать с помощью гридов вывод, все очень криво выходит и поэтому оставлен классический вариант без сетки, местами на флексах.
D.iK.iJ
На сайте с 26.05.2013
Offline
233
#5

Ну... у них там заголовок  max-height87px; и текст за ним max-height54px; и остальное все обрезается. Плюс, одинаковые картинки 400x300. Сам блок 430 - 450 высотой.

Или я что-то не понимаю? Просто такое можно хоть на таблицах и float: left сделать, хоть на  display: inline-block;

Обычное ограничение высоты блоков с overflow: hidden; и  text-overflow: ellipsis; - чтобы при обрезке лишнего многоточие у текста появлялось.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий