Добрый день. Есть у меня некоторый список карточек. Перед списком есть

Question

Добрый день. Есть у меня некоторый список карточек. Перед списком есть

блок с заголовками. Мне нужно сделать так, чтобы содержимое в карточке совпадало по абстрактной вертикальной линии с заголовком. Я пробовал делать шаблон колонок на GRID с использованием minmax(), но мне этот вариант не очень нравится из-за необходимости писать множество медиа-запросов для адаптирования такой сетки. Пробовал через JS высчитывать, но мне интересно имеется ли какой-либо способ сделать такое исключительно на CSS?

#css #frontend #html #programming #russian

0

09.11.2023

11 ответов

45 просмотров

German Stolyarov Автор вопроса

Trazet_Jet
Флекс, грид, таблицы

На флексах не совсем представляю как реализовать. Тут проблема в том, что, к примеру, название длинное, образно занимается процентов 20% от все ширины => "Параметры" должны быть выровнены после него. На гридах пробовал через minmax, но как описал ранее вариант хоть и рабочий, но мне интересны еще варинаты попроще. так сказать. Табличную разметку в контексте этой задачи не рассматриваю. Просто еще суть в том, что это два разных блока.

0

5 месяцев назад

Trazet_Jet

А сокращать текст не вариант, если не влезает?

0

5 месяцев назад

German Stolyarov Автор вопроса

Trazet_Jet
А сокращать текст не вариант, если не влезает?

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

0

5 месяцев назад

Trazet_Jet

German Stolyarov

Не сразу пример из макета привел. Вот так должно б...

Оно у вас адаптивным должно быть?

0

5 месяцев назад

Anatoliy Kulak

German Stolyarov

Не сразу пример из макета привел. Вот так должно б...

Выглядит как таблица, верстаете таблицей) но да, можно и гридами

0

5 месяцев назад

German Stolyarov Автор вопроса

Trazet_Jet
Оно у вас адаптивным должно быть?

Да, примерно до 760px. Ниже уже макет меняется и такой верхней шапки не будет. С маленьким макетом проблем нет. А вот с десктоп я явно где-то что то упускаю :с

0

5 месяцев назад

Trazet_Jet

German Stolyarov
Да, примерно до 760px. Ниже уже макет меняется и т...

Это гемморно

0

5 месяцев назад

German Stolyarov Автор вопроса

Anatoliy Kulak
Выглядит как таблица, верстаете таблицей) но да, м...

Не совсем таблица :) Там просто список карточек в колонку

0

5 месяцев назад