Как задавать одинаковую высоту элемента grid в зависимости от максимальной высоты

Question

Всем привет!

Задача такова, есть простая grid-сетка с 1 колонной и 2 элементами внутри. При сжатии экрана текст перепрыгивает на другую строку тем самым увеличивая сам блок. Но не во всех элементах так много текста. Мне нужно сделать все элементы grid одной высоты и эта высота определяется контентом внутри. Пробовал много вариантов, пока ничего не работает.

Захардкодить высоту - нельзя, использовать position:absolute - нельзя. Грубо говоря при ширине экрана 414px высота карточки из списка 104px(размер определяется контентом), когда ширина экрана сжимается до 320px несколько элементов становятся 128px, те элементы у которых недостаточно контента остаются 104px. @media - запросы использовать тоже нельзя.

const WrapperWithLink = styled(Link)`
  display: grid;
  align-items: center;
  justify-items: end;
  grid-template-columns: 2fr 1fr;
  border-radius: ${theme.radiuses.lg}px;
  box-shadow: ${theme.shadows.cardDefault};
  margin-bottom: ${theme.spacings.xs}px;
  color: inherit;

  &:hover {
    text-decoration: none;
  }
`

const Header = styled(SmartText)`
  justify-self: start;
  align-self: start;
  padding: ${theme.spacings.xs}px;
`

const CustomImage = styled(Image)`
  object-fit: scale-down;
  z-index: ${theme.z_indexes.med};
  width: 100px;
  height: 100px;
`

Я использую styled-components

Answer 1

Ошибка в том, что array.prototype.map проходился по стилями свойства не работали. Нужно создать дополнительную обертку и обернуть список. И этой обертке присвоить стили ниже.



const Wrapper = styled.div`
      display: grid;
      grid-auto-rows: 1fr;
    `

export const Styled = {
       Wrapper,
};



<Styled.Wrapper>
   {someArray.map(item => <Card key={item.id} item={item} />)}
</Styled.Wrapper>

БЛОГ НА HUSL

Как задавать одинаковую высоту элемента grid в зависимости от максимальной высоты

Ответы (1 шт):