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

Question

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

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

#css #frontend #html #programming #russian

0

09.11.2023

11 ответов

86 просмотров

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

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

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

0

09.11.2023

Trazet_Jet

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

0

09.11.2023

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

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

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

0

09.11.2023

Trazet_Jet

German Stolyarov

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

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

0

09.11.2023

Anatoliy Kulak

German Stolyarov

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

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

0

09.11.2023

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

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

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

0

09.11.2023

Trazet_Jet

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

Это гемморно

0

09.11.2023

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

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

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

0

09.11.2023