luxurypluxury, к сожалению, эта информация мало чем отличается от того, что в вопросе.
"Не должна" - отлично. А должно-то что?
Давайте подробнее варианты:
1. Можно открывать поверх следующих элементов: фикс высота + абсолюты или просто выпадение за счет высоты. Вероятно, не получится без JS, если начальная высота неизвестна.
2. Со сдвигом нижних элементов.
2.1. Только своего столбца: потребуется JS для вычисления количества строк, которые должен занять кликнутый элемент. (Теоретически, можно сразу каждому элементу задать большое количество строк, но тогда умрет gap)
2.2. Вообще сдвиг всех элементов и перераспределение по столбцам. Кликнули по элементу в первом столбце - остальные сдвинулись в обоих столбцах и перераспределились по столбцам.
=> Использовать css columns. JS не нужен, но распределение по столбцам по усмотрению браузера, а оно не всегда выходит красивым.
2.3. Можно открывать кликнутый элемент на всю ширину родителя. Соседа при этом тоже можно/нужно растянуть.
2.4. Ваш вариант.
Можно использовать скрипты типа masonry сами по себе или в сочетании с гридами.
Описать на своём родном языке, а что должно происходить вместо этого. Дело в том, что вы и нам не рассказали.
Потом перевести всё это на CSS.
Вероятно, от гридов при этом придется избавиться или добавить js для расчета grid-row
Serezha, нужно прекратить писать в чужом ответе.
Подумайте чьи именно это должны быть псевдоэлементы, чтобы получилось как на скрине.
Отредактируйте вопрос и прикрепите к нему песочницу на codepen.io с тем, что у вас не получилось.
Serezha, вы можете сделать градиент из белого в прозрачный?
Ну или тупо скопировать код из моих примеров, поменяв цвет на свой и повернув уголок, потому что у меня как раз таки в прозрачный.
alexalexes В данном случае CSS никак не ограничивает задумку дизайнера.
Serezha, есть: обычный радиальный градиент. Можете поискать по моим ответам и комментариям. За последний месяц я раза пару раз точно отвечала на этот вопрос.
1. Песочница нерабочая, картинок не видно, размеры не проставлены.
2. За пропорции отвечает в основном aspect-ratio. (а также хак с паддингами, единицы измерения от вьюпорта или контейнера и т.д.)
3. Нет образца - не понятно, зачем вообще абсолют.
Для начала, потому что нарушены правила вложенности тегов. У вас там ссылки снаружи li, должно быть наоборот.
Прогоните код валидатором и исправьте ошибки.
Cortez72, общепринятые стандарты есть, но размеров во-первых, всё равно много, а во-вторых, дизайнер не обязан использовать именно такую ширину фрейма.
Что-то вопрос в заголовке вообще мимо текста внутри.
Если ширина фрейма 1600, то на 1600 всё должно совпадать с макетом с учетом погрешностей разрешенных по ТЗ.
Почему вы проверяете 1600 на 1920 это загадка.
На самом деле вообще без разницы какой экран у вас.
Сайт должен хорошо смотреться на любом экране при любом размере вьюпорта и любой плотности пикселей.
Levott, картинка никуда никого не переводит. Этим занимаются ссылки <a>
Пожалуйста, используйте теги по назначению, вам будут благодарны и люди с ограниченными возможностями и пользователи клавиатуры, работающие без мыши и даже коллеги.
Levott, не правы. Потому что сайтами пользуются не только зрячие люди.
Почитайте как выбирать контентное изображение или украшение.
В этих картинках нет смысла - это украшения.
Хотя бы скройте картинки от скринридеров и добавьте доступно скрытый текст.
melodze, Вы меня извините, но в вопросе вообще нет слова высота.
Карточки грида в принципе одной высоты, по умолчанию. Обведите li рамочками и убедитесь.
Дальше встает вопрос, зачем все остальные обертки внутри. Их либо удалить либо растягиваться на высоту li.
Ответы, которые могут помочь решить задачу тут принято отмечать решениями.
Это помогает и другим спрашивающим с аналогичными проблемами и другим отвечающим не тратить время на чтение вопроса.
"Не должна" - отлично. А должно-то что?
Давайте подробнее варианты:
1. Можно открывать поверх следующих элементов: фикс высота + абсолюты или просто выпадение за счет высоты. Вероятно, не получится без JS, если начальная высота неизвестна.
2. Со сдвигом нижних элементов.
2.1. Только своего столбца: потребуется JS для вычисления количества строк, которые должен занять кликнутый элемент. (Теоретически, можно сразу каждому элементу задать большое количество строк, но тогда умрет gap)
2.2. Вообще сдвиг всех элементов и перераспределение по столбцам. Кликнули по элементу в первом столбце - остальные сдвинулись в обоих столбцах и перераспределились по столбцам.
=> Использовать css columns. JS не нужен, но распределение по столбцам по усмотрению браузера, а оно не всегда выходит красивым.
2.3. Можно открывать кликнутый элемент на всю ширину родителя. Соседа при этом тоже можно/нужно растянуть.
2.4. Ваш вариант.
Можно использовать скрипты типа masonry сами по себе или в сочетании с гридами.