@MamaLuyba

Как в grid сделать, чтобы ширина ячейки подбиралась исходя из текста внутри?

Добрый день.
Есть контейнер:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

И все новые ячейки получают ширину 120px. А если текст внутри не помещается в эти 120px, то увеличивается высота ячейки. Конечно, можно min поставить под ширину самой широкой ячейки, но я так не хочу. Можно отдельным ячейкам установить grid-column: span 5, например, но это тоже долгий процесс.
Есть ли какой-то другой способ?
  • Вопрос задан
  • 840 просмотров
Решения вопроса 1
@MamaLuyba Автор вопроса
в общем, т.к. внятного решения нет, думаю реализовывать такой вариант: при загрузке страницы js прогоняет все ячейки через проверку. при проверке берется ячейка с наименьшей высотой, как эталонная. далее, каждый элемент проверяется на соответствие этой высоте. если высота не соответствует (элемент выше), то для элемента увеличивается grid-column: span на единицу. т.е. если высокий элемент имеет span 1, то подставляем span равный 2 и проверяем высоту. если высота стала эталонной, то берем следующий элемент. если нет - опять span увеличиваем на единицу и т.д.
вешаем обработчик на изменение ориентации, чтобы он пересчитывал значения для разных экранов.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы